Id 在数组 javascript 中答案

【问题标题】：Id's in array javascriptId 在数组 javascript 中
【发布时间】：2015-05-28 18:39:15
【问题描述】：

我的 HTML 脚本中有一组 id。有没有合适的方法将它们放入 javascript 中的数组中以一次更改所有 id("blauw*) 的背景？

这是我的 HTML 代码：

<table width="90%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw1" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw2" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw3" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw4" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw5" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td><a href="#"><img id="blauw6" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td><a href="#"><img id="blauw7" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td><a href="#"><img id="blauw8" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw9" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw10" src="images/lamp_uit.png" width="32" height="63"></a></td>
                </tr>
              </table>

【问题讨论】：

其实我不知道这个问题为什么要专门！！！它是关于编程的，它有源代码，它清楚操作员想要什么。我从来没有读过任何关于你的来源必须是专业的规则！因此，即使它是一个糟糕的代码，也不是投入的问题。也不知道问题的答案与投入无关！给我投票！

标签： javascript html arrays

【解决方案1】：

您可以使用querySelectorAll() 通过substring 的id 属性选择元素：

document.querySelectorAll("img[id^=blauw]");

Fiddle

例如：

var images = document.querySelectorAll("img[id^=blauw]");

for (var i = 0; i < images.length; i++) {
    images[i].src = "";
}

注意事项：

querySelectorAll() 和 CSS3 selectors 部分支持 IE8；
你真的应该使用 classes 来选择一组元素，比如class="blauw"。

通过添加一个类，您可以摆脱标签中的一些属性：
```
.blauw {
    width: 32px 
    height: 63px
}

<img class="blauw" src="images/lamp_uit.png" />
```

【讨论】：

我可以这样改变背景吗？document.querySelectorAll("img[id^=blauw]").src="images/lamp_blauw.png";
@Manariba 不。 querySelectorAll 将返回一个 html 元素的集合，您必须将它们全部循环并更改每个元素的背景。检查更新。
对以下问题有任何想法stackoverflow.com/questions/30518283/…

【解决方案2】：

不是真的。 ID 在整个文档中是唯一的。 CSS 不允许在 ID 选择器中使用通配符，例如

#blauw* { color: red }

是非法语法。你必须写一个疯狂的浪费/无能：

#blauw1, #blauw2, ..., #blauw999999 { color: red }

如果你想给它们涂上相同的颜色，为什么不给它们上课呢？

.blauw { color: red}

<img id="..." class="blauw" ... />
              ^^^^^^^^^^^

【讨论】：

但是用js他可以做得很好......在这种情况下使用id也是错误的:)

【解决方案3】：

您应该能够为所有这些元素添加一个类，然后使用 getElementsByClassName 将这些元素引用到 JS 数组中。

【讨论】：

【解决方案4】：

最好使用blauw 类。

但假设 ID 的最后部分是从 1 开始的连续整数，

var i = 0, arr = [], el;
while(el = document.getElementById('blauw' + ++i)) arr.push(el);

【讨论】：