Я не могу понять, почему removeClass не удаляет активный класс, когда я нажимаю на другой li. Если бы это было то же самое, то я мог бы использовать братьев и сестер, чтобы удалить класс, но, к сожалению, это тоже не работает.

Я хотел бы понять эту простую проблему, которая у меня возникла.

$('.r-picker li').click(function(){
  $('.r-picker li .data.active').removeClass('active');
  $('.r-picker li .data').addClass('active');
});
.active{
  color:red;
  font-size:25px;
  font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
  <ul>
    <li>
      <div class="data">me1</div>
    </li>
    <li>
      <div class="data">me1</div>
    </li>
  </ul>
</div>

http://jsfiddle.net/Lb65e/125/

1
iBrazilian2 8 Дек 2016 в 18:29

3 ответа

Лучший ответ

Обновленная скрипка .

Вместо этого вы должны использовать $(this) для ссылки на li:

$('.data', this).addClass('active');

В противном случае селектор .data в вашем коде добавит класс ко всем элементам этого класса:

$('.r-picker li .data').addClass('active');

ПРИМЕЧАНИЕ. Также вам нужно удалить класс active из всех элементов с классом data, когда вы нажмете с помощью:

$('.r-picker li .data').removeClass('active');

Надеюсь это поможет.

$('.r-picker li').click(function() {
  $('.r-picker li .data').removeClass('active');
  $('.data', this).addClass('active');
});
.active{
  color:red;
  font-size:25px;
  font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
  <ul>
    <li>
      <div class="data">me1</div>
    </li>
    <li>
      <div class="data">me1</div>
    </li>
  </ul>
</div>
3
Zakaria Acharki 8 Дек 2016 в 15:31

Вам нужно выделить div в текущем li.

$('.r-picker li').click(function() {
    $('.r-picker li .data.active').removeClass('active');
    $(this).find('.data').addClass('active');
});

Который сначала удаляет активный класс, а затем находит div.data в. this li и добавляет класс обратно ...

Вот ваша скрипка обновлена и работает: http://jsfiddle.net/Lb65e/126/

1
Stuart 8 Дек 2016 в 15:33

Ваш код работает . Вот что он делает:

 $('.r-picker li .data.active').removeClass('active');

Он находит все элементы с классами data и active и удаляет active из всех них.

 $('.r-picker li .data').addClass('active');

Это находит все элементы с классом data и добавляет класс active ко всем из них.

Таким образом, после запуска вы добавите класс active обратно ко всем элементам, из которых он был удален.

В вашем обработчике событий, когда добавление класса, вам нужно добавить его только к вовлеченному <li>:

$(this).find(".data").addClass("active");

Механизм событий jQuery гарантирует, что this связан с элементом DOM, связанным с событием, поэтому $(this) предоставляет вам объект jQuery для этого элемента. Метод .find() выполняет поиск селектора DOM, начиная с этого элемента, поэтому $(this).find(".data") находит элементы с классом data only в поддереве DOM под выбранным элементом.

1
Pointy 8 Дек 2016 в 15:33