如何根据范围滑块值有条件地向dom节点添加或删除类？

Question

我试图将产品的“输出”与滑块范围值相匹配。我的复选框有效，但滑块不起作用。

请参阅此代码页(选择第二个选择框下的同温层拾音器)

科德芬！

我不确定这样做的最佳方法，但我的想法是为每个产品分配一个输出号，在4-10之间，并使用范围值进行匹配。在匹配时，“产品卡”将显示，并隐藏当不匹配。

到目前为止，我有一个“解构”拾音器组对象的功能：

function defineCards(pickups) {
    let pickupInfo = Object.values(pickups);

    for (i = 0; i < pickupInfo.length; i++) {
      let name = pickupInfo[i].name;
      let output = pickupInfo[i].output;
      let look = pickupInfo[i].look;
      let design = pickupInfo[i].design;

从中我构建了“卡片”来存放数据，并用对象值动态地填充每一张卡。重要的部分是输出部分：

let ab = document.createElement("div");
    ab.classList.add("finalOutput");
    let puOutput = parseInt(output, 10);
    ab.innerHTML = puOutput;
    a.appendChild(ab);

滑翔机：

断裂的部分是滑块。它会自动将“隐藏”类添加到我的所有卡中。我尝试过console.log(value, num)，即使它们匹配，隐藏类也不会消失。

而且，我甚至不确定这是否是最好的方法来做到这一点。也许还有更好的办法。完整的代码在代码中。

以下是滑块的代码：

let slider = document.querySelector("#outputSlider"); //Selects slider
    slider.oninput = function () {
      let value = Math.floor(slider.value / 10); //takes 40 - 100 and divides by 10
      let cards = document.querySelectorAll(".pickup-result");

      let cardOutputs = document.querySelectorAll(".finalOutput"); // selects the output in cards

      cardOutputs.forEach(function (num) {
        console.log(value, num);
        if (value != num) {
          cards.forEach(function (card) {
            card.classList.add("hide"); // add the hide class to the card if it they don't match.
          });
        } else if (value == num) {
          cards.forEach(function (card) {
            card.classList.remove("hide"); // remove the hide class of the card if they match.
          });
        }
      });
    };
  }

编辑：，现在我知道发生了什么，但不知道如何修复它。

问题在于：

let cardOutputs = document.querySelectorAll(".finalOutput")

cardOutputs.forEach(function (num) {
console.log(num)
}

它返回一个控制台日志的4 6 8 5，当我需要，每张卡 num，以比较value。我怎么能这么做？

Answer 1

您正在比较一个数字value和DOM元素num。要解决这个问题，只需在进行所有比较之前将num转换为一个数字即可：

console.log(value, num);

添加

num = Number(num.innerHTML);

根据注释中的请求编辑:若要仅显示滑块值与卡片最终输出之间的匹配，请使用上述相同的逻辑来确定匹配，然后根据其“最终输出”的内容确定要隐藏或显示的卡片。将滑块代码块更改为：

let slider = document.querySelector("#outputSlider");
slider.oninput = function () {
    let value = Math.floor(slider.value / 10);
    let cards = document.querySelectorAll(".pickup-result");
    let cardOutputs = document.querySelectorAll(".finalOutput");
    let match = -1;
    cardOutputs.forEach(function (oCard) {
        if (value == Number(oCard.innerHTML)) {
            match = value;
        }
    });
    if (match >= 0) {
        cards.forEach((card) => {
            const finalOutputDiv = card.querySelectorAll(".finalOutput");
            const id = Number(finalOutputDiv[0].innerText);
            if (id != match) {
                card.classList.add("hide");
            } else {
                card.classList.remove("hide");
            }
        });
    }
};

当滑块值发生变化时，这里发生了两件关键的事情：

1. 循环遍历显示的卡片，如果在显示卡和滑块值之间进行匹配，则设置匹配变量的值。
2. 循环遍历所有卡片，如果卡片'finalOuput‘值等于匹配变量的值，则通过从其类列表中删除hide类来显示卡片，否则通过将hide类添加到其类列表来隐藏卡片。