jquery - 按下重置按钮时从多个对象中删除所有类

Question

您好，我遇到了按下按钮时重置所有类的问题。我有以下 HTML 设置:

<a class="test testclass">Test 1</a>
<a class="test testclass">Test 2</a>
<a class="test testclass">Test 3</a>

<a class="reset_all_classes">RESET ME</a>

使用以下 jQuery:

$('.test').click(function(){
    $(this).toggleClass('testclass testclass-active');
})

// Reset by removing all the testclass-active on all the <a>
$('.reset_all_classes').click(function(){
    $('.test').toggleClass('testclass-active testclass');
})

每当我按下包含类 test 的超链接时，testclass 类将在 testclass-active 中更改。问题在于，如果您选择了测试 1 和测试 3。两者都将具有 testclass-active 然后每当我按下重置按钮时，所有这些超链接都会返回到其默认状态:testclass 。但相比之下，按钮 2 将获得 testclass-active

所以我想知道如何实现按钮的情况:test1和test3具有类testclass-active并且每当我按下重置按钮时所有按钮都会返回到它们的默认类:测试类。

JSFIDDLE HERE

Answer 1

您的代码有问题

每当您单击该元素时，类都会发生更改。当您根据代码重置时，它正在切换。所以它不会进入初始状态。

解决方案

Instead to toggleClass() I used removeClass() and addClass() to make the elements to initial state.

$('.reset_all_classes').click(function(){
    $('.test').removeClass('testclass-active').addClass('testclass');
})

<强> Working Demo