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

韭菜1234

我有一个产品列表，我想使用每个产品唯一的属性“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>

图沙尔沙希

不要认为在使用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，但引用了文档：