0

Criei um div que ao clicar com o mouse em cima, o background dela é preenchida por uma determinada cor.

Existem diversas div's que agem dessa forma, alinhadas lado a lado.

Os id's dessas div's estão nomeados de forma crescente, então se tenho 4 div's por exemplo terei as div's de id's (c0,c1,c2,c3).

Caso eu clique na div c2 por exemplo, todas as div's que estão antes dela precisam receber o efeito de background preenchido.

até ai está tudo ok!

$('.circulo').click(function() {

  this.style.backgroundColor = '#0099ff';

});

$('#fase-range li').click(function() {

  var id = $(this).attr('id');

  var num = id.split('');

  num = num[1];

  for (i = 0; i < num; i++) {

    var newId = 'c' + i;

    $('#' + newId).css('background-color', '#0099ff');
    //alert(newId);
  }

});
.fase-range {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.fase-range li {
  display: inline-block;
  margin-right: -0.1%;
}

.lilinha {
  width: 2%;
}

.licirculo {
  width: 1.1%;
  top: 50%;
  transform: translateY(50%);
  margin-left: -0.25%;
}

.ambiente {
  margin-left: 5%;
  width: 90%;
  margin-top: 10%;
  padding: 1%;
}

.circulo {
  border: 1px solid #3366ff;
  width: 100%;
  border-radius: 100%;
  height: 20px;
  cursor: pointer;
  transition: 3s;
}

.linha {
  border-top: 1px solid #3366ff;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ambiente'>
  <ul class='fase-range' id='fase-range'>
    <li class='licirculo' id='c0'>
      <div class='circulo'></div>
    </li>
    <li class='lilinha' id='l0'>
      <div class='linha'></div>
    </li>
    <li class='licirculo' id='c1'>
      <div class='circulo'></div>
    </li>
    <li class='lilinha' id='l1'>
      <div class='linha'></div>
    </li>
    <li class='licirculo' id='c2'>
      <div class='circulo'></div>
    </li>
    <li class='lilinha' id='l2'>
      <div class='linha'></div>
    </li>
    <li class='licirculo' id='c3'>
      <div class='circulo'></div>
    </li>
  </ul>
</div>

No entanto quando clico em alguma div, as outras div's que recebem o efeito parecem ignorar o transition, e o border-radius aplicados a elas.

  • Como posso fazer pra que isso não aconteça?
  • Teria que aplicar esses efeitos diretamente por Jquery?
  • Por que o css perde a prioridade de setar os efeitos?
0

1 Resposta 1

3

Isso ocorre porque você está aplicando o efeito no pai, e não no .circulo, experimente usar dessa forma informando que quem vai receber o parametro, é o filho.

$('.circulo').click(function() {
    this.style.backgroundColor = '#0099ff';
});

$('#fase-range li').click(function() {
    var id = $(this).attr('id');
    var num = id.split('');
    num = num[1];
    for (i = 0; i < num; i++) {
    var newId = 'c' + i;
        $('#' + newId + ' .circulo').css('background-color', '#0099ff');
        //alert(newId);
    }
});

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 .