定位数据属性和运行功能问题

Question

我试图通过它的数据产品来定位页面上的不同元素，并设置一个规则，如果数据产品是某个数字，那么运行函数。但目前函数运行s 多次，我不确定这是为什么。

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

如果您想为特定项目添加标签，您可以使用它。它能解决您的问题吗？

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>

Answer 2

您的 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>

定位数据属性和运行功能问题

Targeting data attribute & running function issue

javascript

function

getattribute

定位数据属性和 运行 功能问题

Targeting data attribute & running function issue

javascript

function

getattribute

定位数据属性和运行功能问题