Jquery effect does not work as expected

Question

Jquery effect does not work as expected

Navigation

#1 by (3 votes)

0

I created a div that when I clicked the mouse on top, the background of it is filled by a certain color.

There are several div's that act this way, aligned side by side.

The id's of these div's are named increasing, so if I have 4 div's for example I will have the id's (c0, c1, c2, c3) divs.

If I click on the div c2 for example, all the div's that are before it need to have the background effect filled in.

So far so good!

$('.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>

However when I click on some div, the other div's that receive the effect seem to ignore the transition, and the border-radius applied to them.

How can I prevent this from happening?
Would you have to apply these effects directly to Jquery?
Why does css lose the priority of setting the effects?

jquery css

asked by anonymous 05.05.2017 / 13:51

1 answer

What is wrong with my thread using synchronized - Java How to add text + icon in the label?

score 3 · Accepted Answer

This is because you are applying the effect on the parent, not the .circle, try to use that way informing that who will receive the parameter is the child.

$('.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);
    }
});