针对数据属性和运行函数问题

Question

我尝试通过它的data-product在页面上定位不同的元素，并设置一个规则，如果data-product是一个特定的数字，则运行函数。但目前这些函数会多次运行，我不确定为什么会这样。

​

var targetProduct = document.querySelectorAll('.content[data-product]').forEach(function(el) {
  if ('1'.indexOf(el.getAttribute('data-product')) > -1) {
    addMessage();
  } else if ('2'.indexOf(el.getAttribute('data-product')) > -1) {
    addMessage();
  }
});


function addMessage() {
  document.querySelectorAll('.product').forEach(function(el) {
    el.insertAdjacentHTML("afterend", "<p style='color: red'>Sale</p>");
  });
}

<div class="content" data-product="1">
  <p class='product'>Product 1</p>
</div>

<div class="content" data-product="2">
  <p class='product'>Product 2</p>
</div>

<div class="content" data-product="3">
  <p class='product'>Product 3</p>
</div>

<div class="content" data-product="4">
  <p class='product'>Product 4</p>
</div>

​

Answer 1

您的addMessage()函数通过.forEach方法将Sale文本添加到所有元素。相反，您应该将需要对其执行.insertAdjacentHTML操作的元素传递给它，然后在函数内部只更新这一个元素。

下面是一个有效的示例。请注意，我已经使用logical OR (||)操作符将两个if语句合并为一个语句。

​

const targetProduct = document.querySelectorAll('.content[data-product]')

targetProduct.forEach(function(el) {
  const attr = el.getAttribute('data-product')
  if ('1'.indexOf(attr) > -1 || '2'.indexOf(attr) > -1) {
    addMessage(el)
  }
})

function addMessage(el) {
  el.insertAdjacentHTML('afterend', "<p style='color: red'>Sale</p>")
}

<div class="content" data-product="1">
  <p class="product">Product 1</p>
</div>

<div class="content" data-product="2">
  <p class="product">Product 2</p>
</div>

<div class="content" data-product="3">
  <p class="product">Product 3</p>
</div>

<div class="content" data-product="4">
  <p class="product">Product 4</p>
</div>

​

Answer 2

如果你想给特定的项目添加一个标签，你可以使用这个。它能解决你的问题吗？

​

var targetProduct = document.querySelectorAll('.content[data-product]').forEach(function(el) {
  if ('1'.indexOf(el.getAttribute('data-product')) > -1) {
    addMessage('1');
  } else if ('2'.indexOf(el.getAttribute('data-product')) > -1) {
    addMessage('2');
  }
});


function addMessage(id) {
  document.querySelectorAll('.content[data-product="' + id + '"] .product').forEach(function(el) {
    el.insertAdjacentHTML("afterend", "<p style='color: red'>Sale</p>");
  });
}

<div class="content" data-product="1">
  <p class='product'>Product 1</p>
</div>

<div class="content" data-product="2">
  <p class='product'>Product 2</p>
</div>

<div class="content" data-product="3">
  <p class='product'>Product 3</p>
</div>

<div class="content" data-product="4">
  <p class='product'>Product 4</p>
</div>

​