função handleOnChange(this)

Thiago Duarte · Maio 26, 2013

Olá, estou usando a função onchange js para alterar os planos mas esta alterando de todos os planos, alguem pode ajudar ?

O script está assim:

<script>
$(function(){
    $("[name='valor']").change(function(){
        var valor = $(this).val();

        if(valor == 'mensal'){
        $(".valor-real-preco").html("9,90");    
        $(".pay_title_months").html("Pagamento Mensal");    
        }

        if(valor == 'trimestral'){
        $(".valor-real-preco").html("9,60");
        $(".pay_title_months").html("Pagamento Trimestral R$ 28,81");    
        }
        
        if(valor == 'semestral'){
        $(".valor-real-preco").html("9,30");
        $(".pay_title_months").html("Pagamento Semestral R$ 55,84");    
        }
        
        if(valor == 'anual'){
        $(".valor-real-preco").html("8,91");
        $(".pay_title_months").html("Pagamento Anual R$ 106,92");    
        }
        
    });
});
</script>

<div class="box-plan-host">
        <div class="host-plans-title host-color-green">
            <h2>BÁSICO</h2>
        </div>
        
        <div class="space-host"><br />
            <span class="valor-real">R$<span class="valor-real-preco">9,90</span></span> <br>
            <span class="pay_title_months">Pagamento Mensal</span>
            
            <select name="valor" id="select-host" onchange="handleOnChange(this)">
                <option value="anual">Anual - 10% desconto</option>                
                <option value="semestral">Semestral - 6% desconto</option>                
                <option value="trimestral">Trimestral - 3% desconto</option>                                
                <option value="mensal" selected="selected">Mensal</option>                
            </select>
            <img src="/web/wpteste/wp-content/themes/stampdesign/images/imagem-host-box.jpg" alt="" />
        </div>
        
        <div class="feature_desc feature_color1">Espaço ilimitado</div>
        <div class="feature_desc feature_color2">Transferencia ilimitada</div>
        <div class="feature_desc feature_color1">10 Emails</div>
        <div class="feature_desc feature_color2">3 Banco de dados</div>
        <div class="feature_desc feature_color1">Subdominio ilimitado</div>
        <div class="feature_desc feature_color2">Instalador Automático</div>
        <div class="feature_desc feature_color1">Sites 1</div>
        <div class="plan_buy"><a href="#"><img src="/web/wpteste/wp-content/themes/stampdesign/images/botao-contratar-verde.jpg" alt="" /></a></div>
    </div>

    <div class="box-plan-host">
        <div class="host-plans-title host-color-azul">
            <h2>MÉDIO</h2>
        </div>
        
        <div class="space-host">
            <span class="valor-real">R$<span class="valor-real-preco">19,90</span></span> <br>
            <span class="pay_title_months">Pagamento Mensal</span>
            
            <select name="example_select" id="select-host">
                <option selected="selected" value="anual">Anual - 10% desconto</option>                
                <option selected="selected" value="anual">Semestral - 6% desconto</option>                
                <option selected="selected" value="anual">Trimestral - 3% desconto</option>                                
                <option selected="selected" value="anual">Mensal</option>                
            </select>
            <img src="/web/wpteste/wp-content/themes/stampdesign/images/imagem-host-box.jpg" alt="" />
        </div>
        <div class="feature_desc feature_color1">Espaço ilimitado</div>
        <div class="feature_desc feature_color2">Transferencia ilimitada</div>
        <div class="feature_desc feature_color1">10 Emails</div>
        <div class="feature_desc feature_color2">3 Banco de dados</div>
        <div class="feature_desc feature_color1">Subdominio ilimitado</div>
        <div class="feature_desc feature_color2">Instalador Automático</div>
        <div class="feature_desc feature_color1">Sites 3</div>
        <div class="plan_buy"><a href="#"><img src="/web/wpteste/wp-content/themes/stampdesign/images/botao-contratar-azul.jpg" alt="" /></a></div>
    </div>
        </div>
    

    <div class="box-plan-host">
        <div class="host-plans-title host-color-roxo">
            <h2>MASTER</h2>
        </div>
        
        <div class="space-host">
            <span class="valor-real">R$<span class="valor-real-preco">19,90</span></span> <br>
            <span class="pay_title_months">Pagamento Mensal</span>
            
            <select name="example_select" id="select-host">
                <option selected="selected" value="anual">Anual - 10% desconto</option>                
                <option selected="selected" value="anual">Semestral - 6% desconto</option>                
                <option selected="selected" value="anual">Trimestral - 3% desconto</option>                                
                <option selected="selected" value="anual">Mensal</option>                
            </select>
            <img src="/web/wpteste/wp-content/themes/stampdesign/images/imagem-host-box.jpg" alt="" />
        </div>
        <div class="feature_desc feature_color1">Espaço ilimitado</div>
        <div class="feature_desc feature_color2">Transferencia ilimitada</div>
        <div class="feature_desc feature_color1">10 Emails</div>
        <div class="feature_desc feature_color2">3 Banco de dados</div>
        <div class="feature_desc feature_color1">Subdominio ilimitado</div>
        <div class="feature_desc feature_color2">Instalador Automático</div>
        <div class="feature_desc feature_color1">Sites 5</div>
        <div class="plan_buy"><a href="#"><img src="/web/wpteste/wp-content/themes/stampdesign/images/botao-contratar-roxo.jpg" alt="" /></a></div>
    </div>
        </div>
    </div>

    <div class="box-plan-host">
        <div class="host-plans-title host-color-laranja">
            <h2>PREMIUM</h2>
        </div>
        
        <div class="space-host">
            <span class="valor-real">R$<span class="valor-real-preco">19,90</span></span> <br>
            <span class="pay_title_months">Pagamento Mensal</span>
            
            <select name="example_select" id="select-host">
                <option selected="selected" value="anual">Anual - 10% desconto</option>                
                <option selected="selected" value="anual">Semestral - 6% desconto</option>                
                <option selected="selected" value="anual">Trimestral - 3% desconto</option>                                
                <option selected="selected" value="anual">Mensal</option>                
            </select>
            <img src="/web/wpteste/wp-content/themes/stampdesign/images/imagem-host-box.jpg" alt="" />
        </div>
        <div class="feature_desc feature_color1">Espaço ilimitado</div>
        <div class="feature_desc feature_color2">Transferencia ilimitada</div>
        <div class="feature_desc feature_color1">10 Emails</div>
        <div class="feature_desc feature_color2">3 Banco de dados</div>
        <div class="feature_desc feature_color1">Subdominio ilimitado</div>
        <div class="feature_desc feature_color2">Instalador Automático</div>
        <div class="feature_desc feature_color1">Sites 10</div>
        <div class="plan_buy"><a href="#"><img src="/web/wpteste/wp-content/themes/stampdesign/images/botao-contratar-laranja.jpg" alt="" /></a></div>
    </div>
        </div>
    </div>

William Bruno · Maio 26, 2013

leia sobre o this

http://wbruno.com.br/jquery/afinal-e-javascript/

http://wbruno.com.br/jquery/navegando-no-dom-jquery/

Thiago Duarte · Maio 27, 2013

leia sobre o this

http://wbruno.com.br/jquery/afinal-e-javascript/

http://wbruno.com.br/jquery/navegando-no-dom-jquery/

Olá bruno, eu li mais nao entendi muito bem.

como isso iria funcionar dentro do select? para saber que aquele "this" é de um plano e não do outro plano.

Para quando for alterado um plano no select mudar o valor somente dele, entende?

Abs

Bru_ce · Maio 27, 2013

Modifique o que achar Necessário,
OBS: para de ser preguiçoso !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript">
$(function(){
 
$(".selectPlano").change(function(){
var nome = $(this).attr('name');
var junta = "#"+nome;
$(junta).html("Você selecionou o Plano: "+nome);
});
 
 
});
</script>
</head>
 
<body>
<p id="basico"></p>
Plano Básico
<select name="basico" class="selectPlano">
<option>Mensal</option>
<option>Trimestral</option>
<option>Semestral</option>
<option>Anual</option>
</select>
<br /><br />
<p id="intermediario"></p>
Plano Intermediário
<select name="intermediario" class="selectPlano">
<option>Mensal</option>
<option>Trimestral</option>
<option>Semestral</option>
<option>Anual</option>
</select>
</body>
</html>

Thiago Duarte · Maio 27, 2013

Bruno, aqui não funcionou

Bru_ce · Maio 27, 2013

Funciona SIM, só que você tem que adaptar ele conforme precisa.

Thiago Duarte · Maio 28, 2013

eu nao consegui resolver, tem como ajudar meu amigo?

Bru_ce · Maio 28, 2013

Sim, o que não esta funcionando ?O código que fiz, ou o jeito que você quer que ele funcione ?

Thiago Duarte · Junho 4, 2013

esse codigo que vc fez não deu certo aqui comigo

Bru_ce · Junho 4, 2013

Cara, você me tira do sério ! KKKKKKKKKKK
Juro pra você !

Mais o que aconteceu ?
Ele não funcionou N A D A ? Seleciona uma opção e tira print !

Thiago Duarte · Junho 6, 2013

Olá bruno

Olha como ficou o codigo

http://stampdesign.com.br/web/teste/planos.html

Bru_ce · Junho 6, 2013

Não esta funcionando, você não utilizou o método que lhe sugeri acima.

Thiago Duarte · Junho 6, 2013

irmão, ficou assim

http://stampdesign.com.br/web/teste/planos.html

Usei o metodo que vc falou e nada kkkkk

$(function(){

$("[name=valor]").change(function(){

var nome = $(this).attr('valor');

var junta = "#"+valor;

var valor = $(this).val();

if(valor == 'semestral'){

$("#mes").html("R$ 5,50 / MES");

$("#ano").html("R$ 155,50");

}

if(valor == 'anual'){

$("#mes").html("R$ 4,90 / MES");

$("#ano").html("R$ 176,40");

}

});

</script>

Bru_ce · Junho 7, 2013

OBS: é a Ú L T I M A vez que eu faço para você.

Cara, cada elemento tem que ter uma div,
senão todos vão direcionar para a primeira div !

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem titulo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".box select").change(function(){
var nome = $(this).attr('name');
var junta = "#"+nome;
 
var valor = $(this).val();
 
if(valor == 'semestral'){
$(junta).html("R$ 5,50 / MES");
$("#ano").html("R$ 155,50");
}
 
if(valor == 'anual'){
$(junta).html("R$ 4,90 / MES");
$("#ano").html("R$ 176,40");
}
 
});
});
</script>
 
 
 
 
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
 
body {
background-color:#ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
 
.box {
width:200px;
height:205px;
background-color:#fff;
margin:120px auto 0 auto;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
padding-top:20px;
color:#333;
text-align:center;
float:left; 
margin:0 10px;
}
 
.mes {
margin:20px 0;
color:#f2c214;
font-size:25px;
}
 
#ano {
color:#f2c214;
font-weight:bold;
}
 
select {
width:150px;
height:30px;
display:block;
margin:20px auto;
border:1px solid #ccc;
}
 
</style>
 
</head>
 
<body>
<div class="box">
PLANO 1
<p id="plano1" class="mes">R$ 4,90 /MES</p>
no pagamento de <span id="ano">R$176,40</span><br />por 3 anos
 
<select name="plano1">
<option value="anual">ANUAL</option>
<option value="semestral">SEMESTRAL</option>
</select>
 
</div>
 
 
<div class="box">
PLANO 2
<p id="plano2" class="mes">R$ 5,90 /MES</p>
no pagamento de <span id="ano">R$176,40</span><br />por 5 anos
 
<select name="plano2">
<option value="anual">ANUAL</option>
<option value="semestral">SEMESTRAL</option>
</select>
 
</div>
 
 
</body>
</html>

Arquivado

função handleOnChange(this)

Recommended Posts

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Duarte 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante