查找类的所有实例，创建数据属性的数组答案

【问题标题】：Find all instances of a class, create array of a data attribute查找类的所有实例，创建数据属性的数组
【发布时间】：2025-12-25 15:50:06
【问题描述】：

我有一些代码：

<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

如何将所有数据颜色值放入可以比较的数组中？

假设Active Color 是红色，那么脚本会说if active.value == data-color, remove class "hide"

【问题讨论】：

这是两个问题吗？数组与找到具有活动颜色的实例有什么关系？
我猜没什么@Barmar！我只是不确定你是否需要一个数组:)

标签： javascript jquery html css arrays

【解决方案1】：

$(function() {
  var colors = $('.product-images').toArray().map(function(prod) {
    return $(prod).data('color');
  });
  console.log(colors);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

如果您想使用特定颜色并删除所有具有这些数据颜色值的产品的隐藏类，请使用：

$(function() {
  var activeValue = 'Red';
  $('.product-images[data-color=' + activeValue + ']').removeClass('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

【讨论】：

感谢@Gutelaunetyp！在第二个选项中，一旦有了新的 activeValue，您将如何添加该类？从红变蓝？

【解决方案2】：

您可以使用类遍历每个元素，并创建一个数组：

var colors = [];
var divs = document.querySelectorAll(".product-images.hide");
[].forEach.call(divs, function(elem) {
    colors.push(elem.getAttribute("data-color"));
})
console.log(colors);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

并回答您的第二个问题，从正确的元素中删除 .hide 类：

var activeColor = "Red";
$(`div['data-color'=${activeColor}`).removeClass("hide");

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

【讨论】：