如何使用类名

Question

我希望能够按班级更改多个文本输入（但不是全部），但似乎无法使其正常工作。

有什么想法吗？

基本上，我希望在同一页面上有多个重置按钮，我希望将目标文本输入的值“重置”为空。

代码如下：

$(".reset").on('click', function() {
  document.getElementsByClassName('input-1').value = '';
});

使用getElementById时，它可以很好地工作，但是我宁愿将代码最小化，而不必每次为每个文本输入重复一次。

Answer 1

您已经在使用jQuery，所以只需使用

$(".reset").on('click', function() {
  $('.input-1').val('');
});

在类名之前注意.，与.reset中的内容相同。

如果要使用原始JavaScript，则必须遍历getElementsByClassName返回的HTMLCollection：

$(".reset").on('click', function() {
  Array.from(document.getElementsByClassName('input-1')).forEach(el => el.value = '');
});

jQuery会自动为您完成该操作。

Answer 2

您可以为此作业使用特殊的选择器：

let inputs = [... document.querySelectorAll("[class^='input-']")];

inputs.forEach(i  => i.value = "");

class ^ =将返回所有以“ input”开头的包含class属性的元素。