JavaScript - 用另一个交换元素类

Question

我正在经历地狱，现在试图完成最基本的事情。我已经研究并试图使用replace，classLists等，但无法使其工作。注意：对于任何可以帮助的人，我不想使用JQuery，因为我仍在学习JavaScript。

我的目标：将具有“热”类的元素交换为冷，并将一类“冷”交换为热<在“无序列表”元素“杂货”内。

function swapClass(){ 

document.getElementById("groceries").querySelectorAll(".hot").classList.toggle("cold"); 
document.getElementById("groceries").querySelectorAll(".cold").classList.toggle("hot");} 

非常感谢。我希望我能在某个地方走上正确的路线。我也尝试过一个for循环，但肯定意识到这甚至不是必需的。也试过了。

Answer 1

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

Answer 2

你需要做的是在两个步骤：

1. 获取列表hot元素和cold元素。
2. 交换它们。

下面是做这件事：

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

注意classList isn't supported in older browsers，但可能并不重要你。如果是这样，你可以包括a polyfill。

Answer 3

MDN将成为您最好的朋友，他们拥有您可以想到的所有Web API的完整文档。

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

querySelectorAll()返回一个节点列表，其类似于一个JS阵列。此类型上没有classList属性，因此您必须对NodeList中的每个元素进行操作。

这是这里的大问题，另一个是你执行交换的方式。在所有'.hot'元素上切换（冷却）类，然后在所有'.cold'元素上切换'热门'类，即可切换（如果存在则删除，如果不存在则添加）。如果你希望在这个操作之前没有元素既热又冷（这看起来基于你的问题），那么结果就是所有'.hot'元素现在都是'.cold'，所有'.cold'元素都是现在'.cold'和'.hot'。图片来看，你有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'));