活動課程無法正常工作

Question

我有一些菜單項，並且在菜單中有加號（+）。 當我單擊加號時，它應該添加一個類，看起來像十字。 它正在發生，但是當我單擊十字符號時，它不會刪除該符號，因此我可以再次獲得加號。

$(document).ready(function(){    
  $('.nav-link').click(function(){
    $('.nav-link').removeClass('addplus');
    $(this).addClass('addplus');
  });

});

這是示例 。

Answer 1

問題是因為您總是要刪除，然后立即將類添加回clicked元素。 要解決此問題，請使用not()從removeClass()調用中排除當前元素，然后使用toggleClass()將類添加/刪除到所需元素，如下所示：

$('.nav-link').click(function() {
  $('.nav-link').not(this).removeClass('addplus');
  $(this).toggleClass('addplus');
});

更新的小提琴

Answer 2

我在這里的房子周圍走了一些路，但這可以通過parent和siblings ：

$('.nav-link').click(function() {
    $(this).parent(".nav-item").siblings().children(".nav-link").removeClass('addplus');
    $(this).toggleClass('addplus');
});

我不會像您一樣對所有匹配的元素進行全面的removeClass操作，而是通過排除當前匹配的元素來挑選它們。 修正的小提琴： https : //jsfiddle.net/epqxb6L7/5/

Answer 3

這是因為每次click事件觸發時，您的代碼都將刪除並添加相同的類。 試試這個

$(document).ready(function(){    
   $('.nav-link').click(function(){
   $(this).toggleClass('addplus'); //THIS WILL ADD/REMOVE CLASS ALTERNATIVELY
  });
});

Answer 4

您總是在點擊處理程序的最后一行添加addplus類。 請嘗試以下操作：

$(document).ready(function(){    
  $('.nav-link').click(function(){
    if ($(this).hasClass('addplus')) {
      $(this).removeClass('addplus');
    } else {
      $(this).addClass('addplus');
    }
  });
});