удалить класс из нескольких элементов

Question

У меня есть длинный список всех элементов с уникальными идентификаторами, и я хочу иметь возможность переключаться между ними, нажимая на них. Итак, если элемент включен, класс «плюс», и каждый другой элемент будет просто «плюсом». Тем не менее, у меня возникают проблемы с возвратом ранее отобранных элементов обратно к «плюс». Это код, который я, что не работает:

$(".plus").on("click", function() { 
    $(".plus").removeClass("on"); 
}); 

Эта часть делает работу, для поворота элемента на:

 function switch(elem) { 
     var elem = document.getElementById(elem); 
     elem.className = 'plus on'; 
     } 

Я попытался поставить функцию щелчка внутри, а затем перед функцией переключения, но Я не могу заставить работать.

Answer 1

Для простого переключения между элементами одного и того же класса, вы можете использовать более эффективный метод, сохраняя выбранный элемент:

var $current = null; 

$('.plus').on('click', function() { 
    if ($current) { 
     $current.removeClass('on'); 
    } 
    $current = $(this).addClass('on'); 
} 

Как уже упоминалось в комментариях, если элементы добавляются динамически, это будет лучше использовать делегирование событий; например:

$(document).on('click', '.plus', function() { 

Важно: Вместо document вы должны выбрать элемент, что это предок ваших узлов, которые не будут удалены из документа.

Answer 2

$(".plus").on("click", function() { 
    $(this).toggleClass("on"); 
}); 

Может быть то, что вы имеете в виду, работает для текущего элемента щелкнули переключая класс

Answer 3

Попробуйте это: -

$(".plus").on("click", function() { 
    $(".on").each(function(){ 
     $(this).removeClass("on"); 
    }); 
    $(this).addClass("on"); 
});