Javascript 使用数组存储多个ID或类，然后在函数中操作它们

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

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

#1

是索引0，

#10

是索引9

我还了解，我可以使用

进行带有数组的
循环，循环遍历每个条目。我的问题是，当从单击事件（在
input type=“button”
元素上）调用函数时，我似乎无法使其工作

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

JavaScript-尝试以单个条目为目标（工作）
JavaScript-尝试将所有条目作为目标
JavaScript-尝试以所有条目为目标II
JavaScript-尝试以所有条目为目标III
vari；
对于（i=0；i

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

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

如果我能弄清楚如何使用数组，一切都会好起来的

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

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

这会给你

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

如果有效，则ID的数组不是有效的选择器

还请注意，显示和隐藏选项元素不是跨浏览器的
您必须将数组加入到有效jQuery选择器的字符串中

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

这会给你

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

如果有效，则ID的数组不是有效的选择器

还请注意，显示和隐藏选项元素不是跨浏览器的，因为您每次都要查询整个列表，而不是特定的元素，（将[i]添加到目标）

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

vari；
对于（i=0；i
按顺序评论您的方法：

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 -->

JavaScript-尝试以所有条目为目标I

该函数只能在jQuery对象上调用。您不能在阵列上使用它，但可以改为使用：

JavaScript-尝试以所有条目为目标II

使用时，您需要（确定，不需要，但至少应该）使用传递给回调的参数：

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

$（目标）
不选择任何内容。它不会抛出错误（尽管它可能应该抛出）。使用
[index]
符号访问数组元素：

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

for（变量i=0；i
按顺序评论您的方法：

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 -->

JavaScript-尝试以所有条目为目标I

该函数只能在jQuery对象上调用。您不能在阵列上使用它，但可以改为使用：

JavaScript-尝试以所有条目为目标II

使用时，您需要（确定，不需要，但至少应该）使用传递给回调的参数：

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

$（目标）
不选择任何内容。它不会抛出错误（尽管它可能应该抛出）。使用
[index]
符号访问数组元素：

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

for（变量i=0；i
每个
都使用得太多了。可以对整个集合执行大多数jQuery方法
$（选择器）
在jQuery对象中创建一个元素数组总体而言，我认为您的方法比在过多地使用
每个
之前所需要的更复杂。可以对整个集合执行大多数jQuery方法<代码>$（选择器）
创建一个
$.each(targets, function(idx, obj) {
    $(obj).addClass('hide').removeClass('show');
});

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');
});

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