4

Tem um site onde o cliente deverá escolher uma cor e tamanho para determinado produto, o que tenho hoje são divs que mostram as cores e tamanhos mas não estou conseguindo deixar a opção marcada quando a mesma for selecionada, como radios. Preciso dos valores para uma checagem quando os mesmos não forem marcados.

Os css são esses:

.tovar_color_select {padding-bottom:19px;}
.tovar_color_select p {
    margin-bottom:13px;
    text-transform:uppercase;
    font-weight:900;
    font-size:12px;
    color:#333;
}
.tovar_color_select a {
    position:relative;
    display:inline-block;
    margin-right:10px;
    width:32px;
    height:22px;
}

.tovar_color_select a:before {
    content:'';
    position:absolute;
    left:-4px;
    top:-4px;
    right:-4px;
    bottom:-4px;
    border:1px solid #e9e9e9;
    transition: all 0.1s ease-in-out; 
    -webkit-transition: all 0.1s ease-in-out;
}
.tovar_color_select a:hover:before,
.tovar_color_select a.active:before {
    border:2px solid #333;
}

.tovar_size_select {padding-bottom:25px;}
.tovar_size_select p {
    margin-bottom:9px;
    text-transform:uppercase;
    font-weight:900;
    font-size:12px;
    color:#333;
}
.tovar_size_select span {
    float:right;
    display:block;
    line-height:18px;
    font-size:12px;
    color:#666;
}
.tovar_size_select a {
    display:inline-block;
    width:40px;
    height:30px;
    margin:0 1px 5px;
    text-align:center;
    line-height:28px;
    font-size:11px;
    color:#666;
    border:1px solid #e9e9e9;
    transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out;
    -webkit-transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out;
}
.tovar_size_select a:hover,
.tovar_size_select a.active {
    line-height:26px;
    color:#333;
    border:2px solid #333;
}

O que tenho até agora é isso:

<div class="tovar_color_select">
  <p>SELECIONE A COR</p>
  <?php foreach($ResCor as $ProdCor) { ?>
    <a IdCor="<?php echo $ProdCor->IdCor; ?>" style="background-color:<?php echo $ProdCor->Cor ?>;"  ></a>
  <?php } ?>

</div>

<div class="tovar_size_select">
  <div class="clearfix">
    <p class="pull-left">SELECIONE O TAMANHO</p>									
  </div>
  <?php foreach($ResTamanho  as $ProdTam) { ?>
    <a IdTamanho="<?php echo $ProdTam->IdTamanho; ?>" ><?php echo $ProdTam->Nome; ?></a>
  <?php } ?>
</div>

O que estou tentando fazer é o que está nesse link: Modelo

O meu site é esse: Site

1
  • 1
    o que você está buscando aqui? A sua dúvida não está clara. Você passou um trecho de código, você quer ajuda para encontrar um erro nesse trecho de código?
    – durtto
    Commented 16/08/2018 às 14:34

2 Respostas 2

4

Você pode pegar o id por exemplo da div que foi clicada para usar seu valor.

$(document).ready(function(){
    $(".divs").on("click", function(){          // pega click na div
      $(".divs").each(function(){               // para cada div
        $(this).removeClass("selecionado");     // remove a classe selecionada
      })
      $(this).addClass("selecionado");          // adicona a classe no click
      console.log($(this).prop("id"));          // mostra a div selecionada
    })      
})
#div-pai{
  width: 150px;
  display: flex;
  justify-content: space-between;
}
.divs{
  width: 25px;
  height: 25px;
  cursor: pointer;
}
#amarela{
  background-color: yellow;
}
#vermelha{
  background-color: red;
}
#azul{
  background-color: blue;
}
.selecionado{
  border: solid 3px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div-pai">
  <div class="divs" id="amarela"></div>
  <div class="divs" id="vermelha"></div>
  <div class="divs" id="azul"></div>
</div>

2
  • Valeu pela grande colaboração, me ajudou demais. Commented 16/08/2018 às 16:23
  • 1
    Legal que ajudou man.
    – LeAndrade
    Commented 16/08/2018 às 17:41
2

Primeiro crie uma classe em cada <a>:

<a class='tamanho' IdTamanho="<?php echo $ProdTam->IdTamanho; ?>" ><?php echo $ProdTam->Nome; ?></a>

Depois, crie um codigo js:

$('.tamanho').on('click', function () { 
   $('.tamanho').each(function() {
      $(this).removeClass('selecionado');
   });
   $(this).addClass('selecionado');
});

Depois você cria uma classe 'selecionado' no css e aplica a borda ou o estilo que você quiser

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .