Question

我有一些代码：

<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是红色，那么脚本将说如果active.value == data-color，请删除类“ hide”

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

如果要使用特定的颜色并删除所有具有这些数据颜色值的产品的hide类，请使用以下方法：

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

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

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

2 个答案: