使用数组存储多个 ID 或类，然后在函数中对其进行操作

Question

我有一组类存储在一个名为“targets”的 JavaScript 数组中，如下所示：

HTML

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
<div id="eight">8</div>
<div id="nine">9</div>
<div id="ten">10</div>

JavaScript — 数组

var targets = ["#one", "#two", "#three", "#four", "#five", "#six", "#seven", "#eight", "#nine", "#ten"];

然后我想操纵它们以在函数中使用。根据我的情况，我要么想定位数组中的一个特定 ID，要么一次定位数组中的所有条目。我知道数组中的每个条目都有一个唯一的索引号，从 0 开始。因此，#one 是索引 0，#ten 是索引 9。

我也知道我可以将for 循环与数组一起使用，这将循环遍历每个条目。我的问题是，当从点击事件（在 input type="button" 元素上）调用我的函数时，我似乎无法正常工作。

这是我的代码的两个示例。一个针对一个特定条目，另一个针对所有条目。或者至少，这是它应该做的。 Chrome 的控制台显示我的代码没有错误，而且我从未真正使用过数组，所以这对我来说是第一次。

JavaScript — 尝试定位单个条目（工作）

$(targets[0]).addClass('hide').removeClass('show');

JavaScript - 尝试定位所有条目 I

$(targets).each(function() {
    $(this).addClass('hide').removeClass('show');
});

JavaScript - 尝试定位所有条目 II

targets.forEach(function() {
    $(targets).addClass('hide').removeClass('show');
});

JavaScript - 尝试定位所有条目 III

var i;
for ( i = 0; i < targets.length; ++i ) {
    $(targets).addClass('hide').removeClass('show');
}

另外，我知道 jQuery 允许您通过代码的 $() 部分传递多个值来一次操作多个类和/或 ID，但我处于数组条目将是的困境不同，取决于用户输入，我觉得我总共将操作超过 250 个不同的 ID 和类。我只是省略了前 10 个元素的 HTML 代码。

250 个 ID/类中的大多数位于 <option> 元素上。代码中使用的.show 和.hide 类并不直接应用于<option> 元素本身，而是应用于包含这些选项的<select> 元素。每个<select> 元素都有一个唯一的ID。

如果我能弄清楚如何用数组做到这一点，一切都会好起来的。

谢谢。

Answer 1

您必须将数组加入到一个有效的 jQuery 选择器的字符串中

$(targets.join(', ')).addClass('hide').removeClass('show');

这会给你

$("#one, #two, #three ...")

这是有效的，ID 数组不是有效的选择器

另请注意，显示和隐藏选项元素不是跨浏览器

Answer 2

按顺序评论您的方法：

JavaScript — 尝试定位单个条目（工作）

这个正在工作（如你所说）。您可以使用类似的技术来获取 id-s 数组中的所有元素：

$(targets[0]).addClass('hide').removeClass('show');
$(targets.join(",")).addClass('hide').removeClass('show');

然而常见的方法是添加class属性而不是id。毕竟——记住——这就是课程的用途。任何 DOM 元素都可以（而且通常确实）有多个类。

<div id="one" class="number">1</div>
<div id="two" class="number">2</div>
<!-- ... and so on -->

上面两行变成等价于：

// These two lines are each equivalent to $(target[0])
$(".number").eq(0).addClass('hide').removeClass('show'); // or even...
$(".number")[0].addClass('hide').removeClass('show');

// This is equivalent to $(target.join(","))
$(".number").addClass('hide').removeClass('show');

JavaScript - 尝试定位所有条目我

.each 函数只能在 jQuery 对象上调用。您不能在数组上使用它，但可以使用 $.each 代替：

$.each(targets, function(idx, obj) {
    $(obj).addClass('hide').removeClass('show');
});

JavaScript - 尝试定位所有条目 II

当使用forEach 时，您需要（好吧，不是需要，但至少应该）使用传递给回调的参数：

targets.forEach(function(elt, idx, arr) {
    $(elt).addClass('hide').removeClass('show');
    // ... OR ...
    $(arr[idx]).addClass('hide').removeClass('show');
    // ... OR ...
    $(targets[idx]).addClass('hide').removeClass('show');
});

JavaScript - 尝试定位所有条目 III

$(targets) 不选择任何内容。它不会抛出错误（尽管它可能应该）。您可以使用 [index] 表示法访问数组元素：

for (var i = 0; i < targets.length; ++i ) {
    $(targets[i]).addClass('hide').removeClass('show');
}

Answer 3

在您的 for 循环中，您每次都在查询整个列表，而不是特定元素，（将 [i] 添加到目标）

var i;
for ( i = 0; i < targets.length; ++i ) {
    $(targets[i]).addClass('hide').removeClass('show');
}