[Resolvido] código (estoque, tamanho, cor, etc)

[NFelipeFL 1]

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!!

[Anderson Aquino 0]

Também estava atrás de um deste.

[cristian_web 15]

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">
.selected{ color:#CCC; border:solid 3px red; }
</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!

[Anderson Aquino 0]

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!!

[cristian_web 15]

;)

[NFelipeFL 1]

perfeito!!!

 

o meu obrigado aos dois. me ajudou muito!