toggleClass在超链接上不起作用

toggleClass on hyperlink not working

本文关键字：不起作用 超链接 toggleClass      更新时间：2023-09-26

我正在使用以下代码：http://jsfiddle.net/k5pnj4a4/8/然而，我的"toggleClass"不起作用。试试jsFiddle中的例子。基本上，如果我点击链接，它会像预期的那样变红，但再次点击&它不会返回到原始状态：-（

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>

有人能提供帮助吗？

感谢

试试这个：

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