jQuery - Добавить / удалить класс на основе выбранного элемента в списке

#jquery

Вопрос:

У меня есть очень простой список в HTML:

 <ul id="thumbselector">
    <li><img src="http://placekitten.com/80/80"/></li>
    <li><img src="http://placekitten.com/81/81"/></li>
    <li><img src="http://placekitten.com/g/80/80"/></li>
    <li><img src="http://placekitten.com/g/81/81"/></li>
    <li><img src="http://placekitten.com/g/82/82"/></li>
    <li><img src="http://placekitten.com/g/81/82"/></li>
    <li><img src="http://placekitten.com/80/80"/></li>
    <li><img src="http://placekitten.com/81/81"/></li>
    <li><img src="http://placekitten.com/g/80/80"/></li>
    <li><img src="http://placekitten.com/g/81/81"/></li>
    <li><img src="http://placekitten.com/g/82/82"/></li>
    <li><img src="http://placekitten.com/g/81/82"/></li>                            
</ul>

Затем я использую toggleClass, чтобы добавить класс .active в img при нажатии на него:

 $('#thumbselector img').click(function() {
  $(this).toggleClass('active');
});

Однако я хочу, чтобы каждое из изображений знало друг о друге, поэтому, когда я выбираю одно изображение и присваиваю ему класс .active — Если я затем выберу другое изображение, я хочу убедиться, что любое предыдущее изображение с классом .active было удалено.

Есть идеи?

Ответ №1:

Почему бы вместо этого просто не удалить активный класс из всех из них? :

 $('#thumbselector img').click(function() {
  $('#thumbselector img').removeClass('active');    
  $(this).addClass('active');
});

Ответ №2:

Да

http://api.jquery.com/toggleClass/

 $('#foo').toggleClass(className, addOrRemove);

эквивалентно:

 if (addOrRemove) {
    $('#foo').addClass(className);
  }
  else {
    $('#foo').removeClass(className);
  }

Ответ №3:

Это должно сработать:

 $('#thumbselector img').click(function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

Ответ №4:

 $('#thumbselector img').click(function() {
  $('#thumbselector .active').removeClass('active');
  $(this).toggleClass('active');
});

Демонстрация здесь:http://jsfiddle.net/fermin/5JAUh /

Ответ №5:

Просто удалите класс из всех родственных элементов:

 $('#thumbselector img').click(function() {
 $(this).parent().siblings().children().removeClass('active');
 $(this).toggleClass('active');
});

Смотрите это в действии здесь: http://jsfiddle.net/kvhWD /

Ответ №6:

Вам нужно использовать функцию LIVE with click, а не просто CLICK, поскольку вы динамически добавляете / удаляете класс. Смотрите мой пример:

 $('#thumbselector img').live('click', function() {
  $('#thumbselector img').removeClass('active');    
  $(this).addClass('active');
});

Ответ №7:

Вот решение этой проблемы:

 $('#thumbselector img').on("click", function(){
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
});