Question

我有一个范围滑块，可根据其output键过滤JavaScript对象：

<input id="outputSlider" class="form-control" type="range" min="4" max="10">

这是一个对象的小例子：（其中有50个）

const stratPickups = {
    "Model 1": {
      name: "Model 1",
      design: "single-coil",
      output: 4,
      tone: 3,
      
    },
    "Model 2": {
      name: "Model 2",
      design: "single-coil",
      output: 5,
      tone: 5,
      
    },
    "Model 3": {
      name: "Model 3",
      design: "single-coil",
      output: 6,
      tone: 6,
    },
}

在滑块的输入上，它在此处调用此函数：

const outputSliderFunction = () => {
    const slider = document.querySelector("#outputSlider");
    let sliderValue = Number(slider.value);

    activeFilters.output = sliderValue; //Pushes the slider value into an object called activeFilters

    const filteredData = performFilter(data, activeFilters);

    refreshView(filteredData); //Displays the "cards" with the product information
  };

目前，此方法有效，但我想对其进行改进。现在的工作方式是，如果sliderValue与output相匹配，则该卡将显示在页面上。但是，滑块范围中有很大一部分没有显示任何结果。我想更改功能以接受一系列输入，但是我不确定如何以及正在寻找想法。

我以为可以将对象更改为具有min-output和max-output的对象，并弄清楚当滑块值介于它们之间时如何显示结果，但是我不确定该怎么做那。

有什么想法吗？

这是performFilter函数：

  const performFilter = (data, activeFilters) => {
    let result = data;
    Object.keys(activeFilters).forEach((key) => {
      result = result.filter((d) => d[key] === activeFilters[key]);
    });
    return result;
  };

根据范围滑块的值范围筛选结果的最佳方法？

0 个答案: