Question

我正在使用以下代码： http://jsfiddle.net/k5pnj4a4/8/但是我的'toggleClass'无效。试试jsFiddle中的例子。基本上，如果我点击链接，它会按预期变红，但再次点击＆amp;它没有回到原始状态： - （

使用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>

有人可以提供协助吗？

谢谢

Answer 1

试试这个：

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

超链接上的toggleClass不起作用

1 个答案: