Добавление класса при нажатии на элемент

Question

Я пытаюсь создать код jQuery, который добавляет класс active-menu к ссылке всякий раз, когда я нажимаю на нее. Однако мне нужно сначала проверить, есть ли у него класс, прежде чем добавлять. Мне нужна только ссылка, по которой щелкнули, чтобы получить класс.

<%= link_to "Testimonials", root_path, class: "nav-link js-nav", :"data-id" => "testimonials" %>

$(document).on('click', function() {
  var item = $('.js-nav');
  if (item.hasClass('active-menu')) {
    item.removeClass('active-menu');
  } 
  item.addClass('active-menu');
});

Я думал, что это будет работать, но на данный момент он ставит active-menu на все предметы, которые имеют js-nav. Опять же, мне нужно только добавить класс, если у него его еще нет, и мне нужно только добавить элемент click.

Answer 1

Более упрощенное решение:

        $(document).on('click', '.js-nav', function() {
            $(this).toggleClass("active-menu");
        });

См .: https://api.jquery.com/toggleclass/

Answer 2

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

$(document).ready(function () {
    $(this).on('click', '.js-nav', function() {//  here $(this) is refering to document
        $(this).addClass('active-menu');
    });
});

Answer 3

вам нужно использовать $(this), чтобы получить ссылку, по которой щелкают в данный момент, а затем поставить галочку hasClass. Кроме того, если вы удаляете условие и снова добавляете его, вместо этого вы можете проверить, нет ли класса, а затем добавить его, иначе ничего не делать.

Кроме того, добавьте обработчик события click для .js-nav вместо весь документ

$(document).on('click', '.js-nav', function(){
    if (!$(this).hasClass('active-menu')) {
        $(this).addClass('active-menu');
    } 
});

Answer 4

Установите класс в $ (this) вместо каждого элемента, который соответствует классу

Кроме того, добавьте класс в условиях else, иначе он добавит класс даже после его удаления

Вот так

$(document).on('click', function(){
    var item = $(this);
    if (item.hasClass('active-menu')){
      item.removeClass('active-menu');
    } else{
      item.addClass('active-menu');
    }
});