有没有办法同时从元素中添加和删除类

Question

我有这个ui，当用户点击它时，它会展开。https://codepen.io/ankitzz789/pen/gOMdNKg

我有一个css类，名为expand，它增加了元素的宽度。

我已经将事件附加到元素上，所以当我点击它们时，它们会被传递到一个函数，然后该函数将所需的类附加到它

问题是，我只希望一个元素具有该类，这意味着从所有其他未单击的元素中删除该类。

我试过以下方法，但都不起作用。

var previous;
var boxes = document.querySelectorAll(".box");
for(var i=0; i<boxes.length; i++){
boxes[i].addEventListener("click",shifter);
}
function shifter(){
this.classList.add("expand");  // add the class  the clicked element
previous = this; // transfer the element another variable
previous.classList.remove("expand"); // remove  the class, from the element.
}

Answer 1

清除这些代码

previous=this; // transfer the element another variable
previous.classList.remove("expand"); // remove  the class, from the element.

Answer 2

只需将函数更改为：

function shifter(){
for(var i=0; i < boxes.length; i++){    // First remove expand class from your boxes
boxes[i].classList.remove("expand");
}
this.classList.add("expand");           // Next add class to your clicked element 
}

Answer 3

必须先从所有元素中移除class，然后将class添加到目标元素中。所以重写"；移位器功能"；像这样：

for(var i=0; i < boxes.length; i++){   
boxes[i].classList.remove("expand");
}
this.classList.add("expand");    

Answer 4

在您的情况下，您有两个选项：

选项1=>

• 这是我更喜欢的，如果我是你，你已经在使用输入字段，你可以在css中使用焦点伪，它会是这样的：

  .input:focus {
  width: 200px;
  }
  

选项-2=>

• 使用javascript，但您需要首先删除"展开"；所有.box元素的类，它将是这样的：

  var boxes=document.querySelectorAll(".box");
  for(var i=0;i<boxes.length;i++){
  boxes[i].addEventListener("click",shifter);
  }
  function shifter(){
  for(var i=0;i<boxes.length;i++){
  boxes[i].classList.remove("expand");
  }
  this.classList.add("expand");
  }
  

我希望这能帮助你