JavaScript-将一个元素类与另一个元素类交换

我现在正在经历地狱，试图完成最基本的事情。我已经研究并尝试使用replace、classlist等，但无法让它工作。注意：对于任何能提供帮助的人，我不想使用JQuery，因为我还在学习JavaScript

我的目标是：在“无序列表”元素“groceries”中，将类为“hot”的元素替换为cold，类为“cold”的元素替换为hot<

非常感谢。我希望我在某个地方是对的。我也尝试了一个for循环，但我确实意识到这甚至不是必要的。也尝试了。

querySelectorAll（）返回节点列表，因此您必须遍历列表中的每个项目：

function swapClass()
{
   var groceries = document.getElementById("groceries");
   var hotItems = groceries.querySelectorAll(".hot");
   var coldItems = groceries.querySelectorAll(".cold");

   for (var item of hotItems)
   {
       item.classList.add("cold");
       item.classList.remove("hot");
   }

   for(var item of coldItems)
   {
       item.classList.add("hot");
       item.classList.remove("cold");
   }
}

---

您需要分两步进行：

获取

hot

元素和

cold

元素的列表

交换它们

这里有一种方法：

function swapClass() {
  // We'll be using these variables in a few places, so let's define them here.
  var i, element;

  // Get a reference to the top-level element.
  var groceriesElement = document.getElementById("groceries");

  // Get a list of hot and cold elements.
  var hotElements = groceriesElement.querySelectorAll(".hot");
  var coldElements = groceriesElement.querySelectorAll(".cold");

  // Swap the class names.
  for (i = 0; i < hotElements.length; i++) {
    element = hotElements[i];
    element.classList.add("cold");
    element.classList.remove("hot");
  }
  for (i = 0; i < coldElements.length; i++) {
    element = coldElements[i];
    element.classList.add("hot");
    element.classList.remove("cold");
  }
}

函数swapClass（）{
//我们将在一些地方使用这些变量，所以让我们在这里定义它们。
变量i，元素；
//获取对顶级元素的引用。
var groceriesElement=document.getElementById（“groceries”）；
//获取热元素和冷元素的列表。
var hotElements=grocerieElement.queryselectoral（“.hot”）；
var coldElements=grocereseelement.queryselectoral（“.cold”）；
//交换类名。
对于（i=0；i

---

请注意，但这对您可能并不重要。如果有，你可以加入。

MDN将成为你最好的朋友，他们有你能想到的所有Web API的完整文档

querySelectorAll（）

返回一个节点列表，它类似于JS数组。此类型上没有

classList

属性，因此必须对节点列表中的每个元素进行操作

这是这里的一个大问题，另一个是您执行交换的方式。在所有“.hot”元素上切换（如果存在则删除，如果不存在则添加）“cold”类，然后在所有“.cold”元素上切换“hot”类。如果您希望在此操作之前没有元素同时具有热和冷（这似乎是基于您的问题），那么结果是所有“.hot”元素现在都是“.cold”，所有“.cold”元素现在都是“.cold”和“.hot”。如图所示，您有4个元素：

<div class="hot"></div>
<div class="hot"></div>
<div class="cold"></div>
<div class="cold"></div>

---

你得到的结果是什么？@Kinduser那里最肯定的是这样的，你不是先切换热->冷，然后立即切换所有原始的。冷加上所有最近切换的冷->热吗？@Soviut我很惊讶。在谎言中度过一生。

杂货店需要一份杂烩（#）。否则，这可能是最简洁的答案。好吧，这有点道理。我的讲师正在以一种最具误导性和可怕的方式教我们网络，由于我必须遵循一些功能测试，我（和其他人一样）假设只有几行代码没有，而他测试这些代码的方式极其乏味。谢谢。好吧，我觉得应该有更多的步骤，就像我在尝试使用for循环等之前所说的那样，但由于我的讲师教授/测试JavaScript的方式，我认为这将是他为我们编写的几行代码（与其他函数一样）。。另外，我修改了代码以匹配上面的代码，但仍然导致元素1（预期为热，结果为冷）和元素4（预期为冷，结果为热）？
<div class="hot"></div>
<div class="hot"></div>
<div class="cold"></div>
<div class="cold"></div>

<div class="hot cold"></div>
<div class="hot cold"></div>
<div class="cold"></div>
<div class="cold"></div>

<div class="cold"></div>
<div class="cold"></div>
<div class="cold hot"></div>
<div class="cold hot"></div>

var list = document.querySelectorAll('#groceries .hot, #groceries .cold');
list.forEach(el => el.classList.toggle('hot'));
list.forEach(el => el.classList.toggle('cold'));