1

我有一个 php 数组，它写<div id="first_<?php echo $z; ?>" class="source">

我正在尝试在 JavaScript 中创建一个循环，以便可以更改style.display每个循环的属性。s的总数first_可以是 0 到 100 之间的任何值。

我只知道该怎么做是这样的：

function setup() {
    cow = document.getElementById('first_1');
    cow.style.display='none';
    cow = document.getElementById('first_2');
    cow.style.display='none';
    cow = document.getElementById('first_3');
    cow.style.display='none';
  }

我对如何做到这一点的猜测是这样的：

for (var i = 0; i < 100; i++) { 
    cow = document.getElementById('first_'var i);
    cow.style.display='none';
}
4

4 回答 4

1

你使用i不当。仅var在声明变量时使用。

function setup() {
    for (var i = 0; i < 100; i++) {
        document.getElementById('first_' + i).style.display = 'none';
    }
}

您需要确保您获得的元素存在，因此不会引发异常。您可以通过尝试获取元素来做到这一点，如果它是“真实的”，请设置style.display变量：

function setup() {
    for (var i = 0; i < 100; i++) {
        var elem = document.getElementById('first_' + i);
        if (elem)
            elem.style.display = 'none';
    }
}

从我读到的内容，您希望能够提供最大值。您只需添加一个参数：

function setup(max) {
    for (var i = 0; i < max; i++) {
        ...

此外，听起来它可以从 0 到 100包括在内。在这种情况下，只需将 更改<为<=：

function setup(max) {
    for (var i = 0; i < max; i++) {
        ...

我建议这是不好的做法，您应该将整个first_1throughfirst_100块包装在div.

于 2013-04-05T01:34:20.130 回答
1 
for (var i = 0; i < 100; i++) { 
  var cow = document.getElementById('first_' + (i + 1));
  if (cow)
    cow.style.display='none';
}
于 2013-04-05T01:35:08.380 回答
0

您添加i不正确，仅var在声明变量时使用，而不是使用它们。试试这个：

for (var i = 0; i < 100; i++) { 
    cow = document.getElementById('first_' + i);
    cow.style.display = 'none';
}
于 2013-04-05T01:34:54.303 回答
0

如果您不需要支持 IE7 或更早版本，则可以使用querySelectorAll()，使用属性选择器并遍历结果节点，类似于：

var elements = document.querySelectorAll('[id^="first_"]');

for(i = 0; i < elements.length; i += 1){
    elements[i].style.display = 'none';
}

querySelectorAll()在 Chrome、FF、Opera、Safari 和 IE8+ 中受支持，并允许您指定任何有效的 CSS 选择器。

这里的好处是您不必预先知道您有多少元素，因为您只需动态创建一个节点集合，这些节点的标识符以该标识符开头first_并遍历它。

如果您只想选择以您div的 id 开头的元素，first_也可以在选择器中更具体并使用document.querySelectorAll('div[id^="first_"]');

演示- 使用querySelectorAll()

于 2013-04-05T01:45:56.857 回答