Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>>
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
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><select name="basico" class="selectPlano">
<option>Mensal</option>
<option>Trimestral</option>
<option>Semestral</option>
<option>Anual</option>
</select>
<br /><br />
<p id="intermediario"></p><select name="intermediario" class="selectPlano">
<option>Mensal</option>
<option>Trimestral</option>
<option>Semestral</option>
<option>Anual</option>
</select>
</body>
</html>Bruno, aqui não funcionou
Funciona SIM, só que você tem que adaptar ele conforme precisa.
eu nao consegui resolver, tem como ajudar meu amigo?
Sim, o que não esta funcionando ?O código que fiz, ou o jeito que você quer que ele funcione ?
esse codigo que vc fez não deu certo aqui comigo
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 !
Não esta funcionando, você não utilizou o método que lhe sugeri acima.
irmão, ficou assim
http://stampdesign.com.br/web/teste/planos.html
Usei o metodo que vc falou e nada kkkkk
<script>
$(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>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"><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"><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>
leia sobre o this
http://wbruno.com.br/jquery/afinal-e-javascript/
http://wbruno.com.br/jquery/navegando-no-dom-jquery/