如何一次定位多个数据属性

Question

我有一个产品列表，我想使用每个产品唯一的属性“data-ga-product”来定位它们。我想要实现的是向我定位的这些产品插入一个带有“New In”之类消息的跨度。

如果我单独执行此操作，我可以正常工作，但是您可以一次针对多个产品，这样就不需要重复代码吗？我已经尝试了下面的方法，但它只针对第一个选择器，或者有更好的方法来实现我想要实现的目标吗？

// Attempt at targeting multiple data attributes at once
var targetProduct = document.querySelectorAll('[data-ga-product="04245"]','[data-ga-product="263743"]' ).forEach(function (el){
    el.insertAdjacentHTML("beforeend", "<span>New In</span>");
});


/*
Targeting each indivudally
var targetProduct = document.querySelector('[data-ga-product="04245"]');
targetProduct.insertAdjacentHTML("beforeend", "<span>New In</span>");
var targetProduct = document.querySelector('[data-ga-product="263743"]');
targetProduct.insertAdjacentHTML("beforeend", "<span>New In</span>");
*/

.container {padding: 5px 0;}

<article class="container" data-ga-product="04245">
  <div class="productContent">
    <a class="productTitle" href="#product1">Product 1</a>
    <div class="productPrice">€&nbsp;19,90</div>
  </div>
</article>

<article class="container" data-ga-product="05395">
  <div class="productContent">
    <a class="productTitle" href="#product2">Product 2</a>
    <div class="productPrice">€&nbsp;109,90</div>
  </div>
</article>

<article class="container" data-ga-product="263743">
  <div class="productContent">
    <a class="productTitle" href="#product3">Product 3</a>
    <div class="productPrice">€&nbsp;59,90</div>
  </div>
</article>

<article class="container" data-ga-product="60493">
  <div class="productContent">
    <a class="productTitle" href="#product4">Product 4</a>
    <div class="productPrice">€&nbsp;23,90</div>
  </div>
</article>

Answer 1

不要认为在使用 querySelector() 时可以在数组变量中查找值。

不过，如果您想要简洁的代码，您可以有条件地将元素插入 forEach()。

// Attempt at creating this as an array
var targetProduct = [...document.querySelectorAll('[data-ga-product]')].forEach(function (el){
if(['04245' , '263743'].indexOf(el.getAttribute('data-ga-product')) > -1)    
el.querySelector('.productTitle').insertAdjacentHTML("afterend", "<span>New In</span>");
});

.container {padding: 5px 0;}

<article class="container" data-ga-product="04245">
  <div class="productContent">
    <a class="productTitle" href="#product1">Product 1</a>
    <div class="productPrice">€&nbsp;19,90</div>
  </div>
</article>

<article class="container" data-ga-product="05395">
  <div class="productContent">
    <a class="productTitle" href="#product2">Product 2</a>
    <div class="productPrice">€&nbsp;109,90</div>
  </div>
</article>

<article class="container" data-ga-product="263743">
  <div class="productContent">
    <a class="productTitle" href="#product3">Product 3</a>
    <div class="productPrice">€&nbsp;59,90</div>
  </div>
</article>

<article class="container" data-ga-product="60493">
  <div class="productContent">
    <a class="productTitle" href="#product4">Product 4</a>
    <div class="productPrice">€&nbsp;23,90</div>
  </div>
</article>

注意：我使用 ... 将 NodeList（由 querySelectorAll() 返回）转换为数组。 forEach() 方法也在 NodeList 上实现，但引用了文档：

However, some older browsers have not implemented NodeList.forEach()

如何一次定位多个数据属性

How to target multiple data attribute at once

javascript

arrays

attributes