querySelectorAll 获取具有特定名称和值的输入滑块

问题描述

如何让 querySelectorAll 返回 name="type" 和 value="0" 的所有滑块

我当前的代码如下所示：

function getSlider0Values(name) {
    const sliders = document.querySelectorAll(`input[name = "${name}"][value='0'] `);
    let type_0preference_list = [];
    sliders.forEach((range) => {
        type_0preference_list.push(range.id);
    });
    return type_0preference_list;
}

<div class="type_sliders">
  <label for="Apples">Apples</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Apples" class="type_slider">

  <label for="Peaches">Peaches</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Peaches" class="type_slider">

  <label for="Pears">Pears</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Pears" class="type_slider">
</div>

它当前正在选择所有滑块，而不仅仅是值为 0 的滑块。

解决方法

您的代码正在运行。您将获得所有滑块，因为所有主题都有 name="type" 和 value="0"。

const inputs = Array.from(document.getElementsByTagName('INPUT'));

const handler = (e) => {
    const result = inputs.filter((input) => {
        return (input.value === '0' && input.name === 'type');
    });
    
    console.log(result);
};

document.getElementById('Container').addEventListener('change',handler)

<div id="Container" class="type_sliders">
  <label for="Apples">Apples</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Apples" class="type_slider">

  <label for="Peaches">Peaches</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Peaches" class="type_slider">

  <label for="Pears">Pears</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Pears" class="type_slider">
</div>

这可能有点令人困惑，因为虽然 range.value 将为您提供滑块的当前值，但 CSS 中 value='0' 的测试不会在输入更改时更新。

您可以在更改时更新属性，然后您的选择将起作用。有关更多解释，请参阅 this answer。

您可以做的一件事是监听每个输入的更改事件并相应地更新实际属性。或者，您可以只在您的函数中执行此操作，而不必理会其他事件侦听器。这取决于您的实际用例。

此代码段通过在每个输入上设置事件侦听器来更新更改，因此 value 属性始终是最新的。

//set an event listener on each input so value attribute can be updated
const allSliders = document.querySelectorAll('input.type_slider');
allSliders.forEach((slider) => {
  slider.addEventListener('change',function() {
    slider.setAttribute('value',slider.value);
  });
});

function getSlider0Values(name) {
    const sliders = document.querySelectorAll(`input[name = "${name}"][value='0'] `);
    let type_0preference_list = [];
    sliders.forEach((range) => {
        type_0preference_list.push(range.id);
    });
    return type_0preference_list;
}

<div class="type_sliders">
  <label for="Apples">Apples</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Apples" class="type_slider">

  <label for="Peaches">Peaches</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Peaches" class="type_slider">

  <label for="Pears">Pears</label>
  <input type="range" name="type" min="0" max="5" value="0" id="Pears" class="type_slider">
</div>
<button onclick="console.log(getSlider0Values('type'))">Alter some slider(s) and then click me</button>

javascript jquery-selectors