Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
to quebrando a cabeça aqui com isso, rs.
o que to tentando fazer é o seguinte: mudar o <select> para opções com o design mais "bonito",
como acontece na netshoes (tamanho da camisa), centauro (tamanho da camisa) e aqui: https://www.minhalojaweb.com.br/loja/detalhe.aspx?comando=exemplo6&produto=140
onde o cliente CLICA no tamanho e na cor. O que estou querendo é apenas o tamanho.
Tentei fazer aqui e deu nisso: http://jsfiddle.net/bd4pJ/
Ai não está aparecendo, mas quando clica no tamanho, o tamanho fica vermelho...
Na verdade está bem incompleto... Gostaria de saber como se chama essa
função e onde encontro algo já "feito" ou explicado e como passar pro
formulario..
abraços!!
Olá. Cara você pode fazer o seguinte, vou te passar a logica e você adapta:
Estude um pouco de jQuery e faça o seguinte:
<script type="text/javascript" src="jquery-latest.js"></script>
<style type="text/css"></style>
<ul>
<li id="tamanho01" style="width:30px;height:30px; background:#000; list-style:none;"></li>
</ul>
<script type="text/javascript">
$("#tamanho01").click(function () {
$("#tamanho01").addClass("selected");
$('input[id=tamanho]').val('1');
});
</script>
<input type="hidden" name="tamanho" id="tamanho" value="">Ou seja ao clicar na lista, ele muda a classe alterando o estilo e adicionando o valor 1 ao campo hidden para passar para outra pagina através de um formulário!
Adicionei dois botões e duas classes:
<li id="tamanho01" style="width:30px;height:30px; background:#000; list-style:none;"></li>
<br>
<li id="tamanho02" style="width:30px;height:30px; background:#000; list-style:none;"></li>
</ul>
<script type="text/javascript">
$("#tamanho01").click(function () {
$("#tamanho01").addClass("selected");
$('input[id=tamanho]').val('1');
});
$("#tamanho02").click(function () {
$("#tamanho02").addClass("selected");
$('input[id=tamanho]').val('2');
});
</script>Mas ao clicar no tamanho01 e no tamanho02, os dois continuam marcados. Vou estudar mais a função removeClass que acho que é com ela.
Valeu Cristian!!!
Caso eu consiga entro em contato com o criador do topico passando o código.
Edit: novo código mais ou menos assim:
<script type="text/javascript">
$("#tamanho01").click(function () {
if ($("#tamanho01").hasClass("selected")) {
$("#tamanho01").removeClass("selected");
} else {
$("#tamanho01").addClass("selected");
$("#tamanho02").removeClass("selected");
$('input[id=tamanho]').val('1');
}
});
$("#tamanho02").click(function () {
if ($("#tamanho02").hasClass("selected")) {
$("#tamanho02").removeClass("selected");
} else {
$("#tamanho02").addClass("selected");
$("#tamanho01").removeClass("selected");
$('input[id=tamanho]').val('2');
}
});
</script>obrigado cristian!!
;)
perfeito!!!
o meu obrigado aos dois. me ajudou muito!
Também estava atrás de um deste.