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

Question

如何将 querySelectorAll 获取到 return 所有名称为“type”且值为“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 的滑块。

Answer 1

您的代码正在运行。您将获得所有滑块，因为所有主题都有 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>

Answer 2

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

您可以根据更改更新属性，然后您的选择就会起作用。有关更多说明，请参阅 this answer。

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

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

//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>

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

querySelectorAll to get input sliders with a specific name and also value

javascript

jquery-selectors