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的情况，每当我按下重置按钮时，所有按钮都返回到其默认类：testclass。

JSFIDDLE HERE

Answer 1

您的代码存在问题

当您点击元素时，类将被更改。当您根据代码重置时，它正在切换。所以它不会进入初始状态。

<强>解决方案

取而代之的是toggleClass()我使用removeClass()和addClass()将元素设置为初始状态。

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

<强> Working Demo

Answer 2

＆＃13;

$('.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').removeClass("testclass-active").addClass("testclass");
})

＆＃13;

.testclass,
.reset_all_classes,
.testclass-active {
  display: block;
  width: 100px;
  padding: 5px 10px;
  background-color: lightblue;
  margin: 20px;
  cursor: pointer;
}
.testclass-active {
  background-color: green;
}
.reset_all_classes {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

Demo

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

不要切换只需添加类并删除您知道要添加的内容和要删除的内容的类

Answer 4

$('.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').removeClass('testclass-active');
  $('.test').addClass('test testclass');
})

.testclass, .reset_all_classes, .testclass-active{
  display:block;
  width:100px;
  padding:5px 10px;
  background-color:lightblue;
  margin:20px;
  cursor:pointer;
}

.testclass-active{
  background-color:green;
}

.reset_all_classes{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

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

4 个答案: