Question

我如何能够对元素进行toggleClass，但只有一个可以＆＃34;切换＆＃34;在时间。有解决方案（通过添加另一个for循环来禁用效果），但在pureJS中我需要帮助才能在jQuery中使用它。

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这是jQuery函数。总之，我需要只有一个框可以是红色，当点击另一个框时，它会禁用所选的一个。完全像javascript中的一个。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

这个，指的是当前点击的元素。您需要将其应用于所有导航项目，例如下面。

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 2

通常的做法是在将类应用到新选择的类之前删除所有其他可能的“切换”上的类，如下所示：

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

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

（你应该使用一个类，而不是ID，只要你有多个元素来应用它（所以我使用.box，而不是#box）。

另一个要点是只选择一次框，并将它们存储在单击处理程序之外的变量中。这样，您并不总是在每次点击时重新选择它们。

Answer 3

就像之前所说的那样使用一个类而不是一个ID。您可以使用.not（）jQuery方法来实现此目的。

注意： Beejamin的答案和我的答案之间的区别在于，在这一个中你可以切换红色类再次点击同一个方格同时删除兄弟姐妹的选择。

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中，只有一个元素可以是＆＃34; toggleClass＆＃34; -ed

3 个答案: