toggleClass在超鏈接不起作用

-1

我正在使用以下代碼： http://jsfiddle.net/k5pnj4a4/8/但是，我的'toggleClass'不起作用。試試jsFiddle中的例子。基本上，如果我點擊鏈接，它作爲預期，但再次單擊&它不返回到原來的狀態:-(toggleClass在超鏈接不起作用

的Javascript雲紅：

$(document).ready(function(){ 

    $('.filters a').on('click', function() { 

     var data_filter = $(this).closest("a").data('filter'); 
     $(this).addClass('active'); 
     if($(this).hasClass('active')) { 
      localStorage.setItem(data_filter,true); 
     } else { 
      localStorage.setItem(data_filter,false); 
     } 

    }); 

    $('.filters a').each(function(){ 
     var data_filter = $(this).closest("a").data('filter'); 
     var checked = localStorage.getItem(data_filter); 
     if(checked){ 
      $(this).addClass('active'); 
     } else { 
      $(this).removeClass('active'); 
     } 
    }); 
});

HTML

<div class="filters"> 

<h3 data-target="#colours_filters">Colour</h3> 
<ul id="colours_filters"> 
    <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-black-2">Black</a></li> 
    <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-blue">Blue</a></li> 
</ul> 

</div>

有人可以提供這方面的協助嗎？

謝謝

來源

2014-09-30 michaelmcgurk

不知道你想要什麼，但正是我認爲你需要像這樣http://jsfiddle.net/k5pnj4a4/10/ – 2014-09-30 08:46:03

沒有'toggleClass（）'任何地方調用的方法在你提供的片段中。 – George 2014-09-30 08:52:24

你'addClass（）'，然後立即測試'hasClass（）'。你的第一個'if'語句將總是*爲真。 – George 2014-09-30 08:54:26

試試這個：

$(document).ready(function(){ 
    $('.filters a').on('click', function() { 
     if($(this).hasClass("active")) { 
      $(this).removeClass("active"); 
     } 
     else { 
      $(this).addClass("active"); 
     } 
    }); 
});

來源

2014-09-30 08:48:28 prootex

非常感謝 - 這是完美的！我注意到的一個奇怪的故障是，一列列表項在onLoad上完全「活動」，另外三列不活躍（除非它們以前是活動的）。有任何想法嗎？如果需要，我可以提供一個新的jsfiddle :-) – michaelmcgurk 2014-09-30 09:18:55

toggleClass在超鏈接不起作用

回答

相關問題