在 jQuery 中一次只能 "toggleClass" 编辑一个元素

Question

我如何能够在元素上切换类，但一次只能 "toggled"。有解决方案（通过添加另一个 for 循环来禁用效果），但在 pureJS 中，我需要帮助才能在 jQuery.

中完成这项工作

var elements = document.querySelectorAll("#box");

for ( var i = 0; i < elements.length; i++ ) (function(i){ 
  elements[i].onclick = function() {
    for (var j = 0; j < elements.length; j++) {
      elements[j].style.border = '';
      elements[j].innerHTML = '';
    }
    elements[i].style.border = "10px solid red";
    elements[i].innerHTML = "selected";
  };
})(i);

body {background-color: black;}
#box {
  background: white;
  color: red;
  text-align: center;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  display: block;
  float: left;
  margin: 1%;
}
#box.red{
  background: red;
}

<body>
  <div id="box"></div>
  <div id="box"></div>
  <div id="box"></div>
  <div id="box"></div> 
</body>

这里是 jQuery 函数。简而言之，我需要 一次只有一个框可以是红色 并且当单击另一个框时它会禁用选定的框。与上面 javascript.

中的一模一样

$("div#box").click(function(){
  $(this).toggleClass("red");  
});

body {background-color: black;}
#box {
  background: white;
  color: red;
  text-align: center;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  display: block;
  float: left;
  margin: 1%;
}
#box.red{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="box"></div>
  <div id="box"></div>
  <div id="box"></div>
  <div id="box"></div>
  
</body>

Answer 1

通常的做法是在将 class 应用到新 select 之前删除所有其他可能的 'toggles' 上的 class，像这样：

var boxes = $('div.box');

boxes.click(function(){
  boxes.removeClass('red');
  $(this).addClass('red');  
});

（你应该使用 class，而不是任何时候你有多个元素要应用它的 ID（所以我使用 .box，而不是 #box） .

另一个重要的一点是 select 框仅一次，并将它们存储在点击处理程序之外的变量中。这样，您就不会总是在每次点击时重新select访问它们。

Answer 2

this，指的是当前点击的元素。您需要将其应用于所有导航项，如下所示。

var 
$boxes = $("div#box").click(function(){
  $boxes.removeClass("red"); 
  $(this).addClass("red");  
});

body {background-color: black;}
#box {
  background: white;
  color: red;
  text-align: center;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  display: block;
  float: left;
  margin: 1%;
}
#box.red{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="box"></div>
  <div id="box"></div>
  <div id="box"></div>
  <div id="box"></div>
  
</body>

Answer 3

如前所述，使用 class 而不是 ID。您可以使用 .not() jQuery 方法来实现此目的。

注意： Beejamin 的答案和我的不同之处在于，在这个答案中，您可以切换红色 class 再次单击同一个方块，同时还删除兄弟姐妹选择。

var box = $(".box");
box.click(function() {
  $(this).toggleClass("red");
  box.not(this).removeClass("red");
});

body {
  background-color: black;
}

.box {
  background: white;
  color: red;
  text-align: center;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  display: block;
  float: left;
  margin: 1%;
}

.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

在 jQuery 中一次只能 "toggleClass" 编辑一个元素

only one element at time can be "toggleClass"-ed in jQuery

javascript

css

time

jquery

element