Question

我有一个按值过滤产品的滑块。向左拖动滑块将显示“较低的价值”产品，向右拖动将向您显示较高的价值产品。我已经使此滑块正常工作，但是我想使用单选按钮进一步优化结果。

为清晰起见，以下是有关问题和工作流程的视频： Video of Problem, takes to IMGUR.

function filter() {
    let value = Math.floor(slider.value / 10);
    let cardOutputs = document.querySelectorAll(".pickup-result");
    let match = -1;

    cardOutputs.forEach(function (oCard) {
      let cardOutput = Number(oCard.dataset.output); // Gets the Output from the data-output attribute
      if (value == cardOutput) {
        match = value;
      }
    });

    if (match >= 0) {
      cardOutputs.forEach((card) => {
        const id = Number(card.dataset.output);

        if (id != match) {
          card.classList.add("hide"); //If no match, hide the result & remove the result attribute, if it has one
          if (card.hasAttribute("data-slider")) {
            card.removeAttribute("data-slider", "result");
          }
        } else {
          resultHeading.classList.remove("hide"); // If a match occurs, remove the hide class and add the data attribute of result to it.
          card.classList.remove("hide");
          card.setAttribute("data-slider", "result");
        }
      });
    }
  }
  slider.oninput = filter; //Filter on slider dragging

进一步过滤： 我有一个根据外观的数据属性过滤的表单。它有两个单选按钮，一个为传统外观，一个为独特外观。单击外观按钮可能有很多问题，但是可以。

问题： 按外观过滤后，触摸滑块可重置值。这是功能。

function filterAppearance() {
    traditionalAppearance.addEventListener("click", function () {
      let cards = document.querySelectorAll(".pickup-result");

      cards.forEach(function (card) {
        if (card.dataset.appearance === "traditional" && card.dataset.slider === "result") {
          resultHeading.classList.remove("hide");
          card.classList.remove("hide");
        } else if (card.dataset.appearance === "unique") {
          card.classList.add("hide");
          card.removeAttribute("data-slider", "result");
        }
      });
    });

我的目标是保留外观过滤器（将来还会增加更多过滤器）。谁能帮我确定为什么这些功能不能持续吗？

Codepen！

这是一个带有说明的codepen：

Codepennnn

如何修复通过滑块oninput功能重置单选按钮功能？

0 个答案: