Question

我不确定我是完全走错了路，还是只是错过了一点点。我有一个包含部分，小节和子小节的页面。后者是所有都具有相同格式的元素：

<select id="SubSubFlood"  class='hidden'>
    <option></option>
</select>
<select id="SubSubHome"  class='hidden'>
    <option></option>
</select>

由于它们是动态生成的，因此我不能明确为其命名，但是它们都以“ SubSub”开头。我正在尝试创建将所有SubSubs更改为class ='hidden'的代码，然后将我希望看到的SubSubs更改为class ='unhidden'。这是我的尝试：

function ShowSubSub(SelectID) {
    var SubSub = document.getElementsByTagName("Select");
    var item;
    for (item in SubSub) {
        if (item.ID.match(/SubSub.*/)) {            
            item.className = 'hidden';
        }
    }
    item = document.getElementById(SelectID);
    item.className = 'unhidden';
}

我在哪里想念船？如何获取JavaScript以将ID以“ SubSub”开头的每个标签更改为class =“ hidden”？

Answer 1

SubSub将包含一个array like object，因此，将其放在for each循环中时，将枚举它的属性，而不是元素本身。因此循环中的项目将不是0的第一选择。我建议将其更改为普通的for循环

function ShowSubSub(SelectID) {
  var SubSub = document.getElementsByTagName("Select");
  var item;
  for (var i =0; i < SubSub.length; i++) {
    if (SubSub[i].id.match(/SubSub.*/)) {
      SubSub[i].className = 'hidden';
    }
  }
  item = document.getElementById(SelectID);
  item.className = 'unhidden';
}

ShowSubSub('SubSubHome')

.hidden{

display:none;
}

<select id="SubSubFlood" class='hidden'>
  <option>Flood</option>
</select>
<select id="SubSubHome" class='hidden'>
  <option>Home</option>
</select>

P.S。有unhidden类的任何理由，您不能只删除hidden类吗？

Answer 2

这回答了这个问题：

如何获取JavaScript以将ID以“ SubSub”开头的每个标签更改为class =“ hidden”？

[...document.querySelectorAll('[id^="SubSub"]')].forEach(section => section.className.add('hidden'))

将实现这一目标。

因此，我们将其分解：

首先使用属性选择器，该属性选择器匹配具有以id：SubSub开头的[id^="SubSub"]值的所有元素。

查询所有以下内容的文档：document.querySelectorAll('[id^="SubSub"]')
使用NodeList（传播算子）将您进入的array传播到...：
```
[...document.querySelectorAll('[id^="SubSub"]')]
```
或者，您也可以使用Array.from(iterable)：
```
Array.from(document.querySelectorAll('[id^="SubSub"]'))
```

因此跨浏览器安全地在结果中使用forEach：

[...document.querySelectorAll('[id^="SubSub"]')].forEach((section) => {})

在该循环中，只需将类名添加到classList：
```
section.className.add('hidden')
```

Answer 3

问题在于getElementsByTagName返回的HTMLCollection对于for-in来说“不起作用”，而是使用

for (let i =0; i<SubSub.length; i++) {
    let item = SubSub[i];
    if (item.id.match(/SubSub.*/)) {            
        item.className = 'hidden';
    }
}

function ShowSubSub(SelectID) {
    var SubSub = document.getElementsByTagName("Select");
    console.log(SubSub);
    for (let i =0; i<SubSub.length; i++) {
        let item = SubSub[i];
        if (item.id.match(/SubSub.*/)) {            
            item.className = 'hidden';
        }
    }
    item = document.getElementById(SelectID);
    console.log(item);
    item.className = 'unhidden';
}

ShowSubSub('SubSubHome');

.hidden {
  background: red;
}

.unhidden {
  background: blue;
}

<select id="SubSubFlood" >
    <option></option>
</select>
<select id="SubSubHome"  >
    <option></option>
</select>

我还对connexo解决方案进行了一些改进：

function ShowSubSub(SelectID) 
{
      [...document.querySelectorAll('[id^="SubSub"]')].map(s => 
        s.id==SelectID ? s.className=('unhidden') : s.className=('hidden')
    )
}

ShowSubSub('SubSubHome');

   function ShowSubSub(SelectID) 
{
	  [...document.querySelectorAll('[id^="SubSub"]')].map(s => 
    	s.id==SelectID ? s.className=('unhidden') : s.className=('hidden')
    )
}

ShowSubSub('SubSubHome');

.hidden {
  background: red;
}

.unhidden {
  background: blue;
}

<select id="SubSubFlood" >
    <option></option>
</select>
<select id="SubSubHome"  >
    <option></option>
</select>

JavaScript无法收集文档元素

3 个答案: