定位資料屬性&運行功能問題-有解無憂

我試圖通過它的資料產品來定位頁面上的不同元素，并設定一個規則，如果資料產品是某個數字，則運行該功能。但目前這些功能運行多次，我不確定這是為什么。

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>

uj5u.com熱心網友回復：

您的addMessage()功能是Sale通過該.forEach方法將文本添加到所有元素。相反，您應該將需要對其.insertAdjacentHTML完成的元素傳遞給它，然后在函式內部僅更新該元素。

這是一個作業示例。請注意，我已使用邏輯 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>

uj5u.com熱心網友回復：

如果您想為特定專案添加標簽，您可以使用它。它能解決你的問題嗎？

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/360079.html

標籤：javascript 功能获取属性

上一篇：帶有文本按鈕innerHTML的手風琴

下一篇：如何在jstree資料中使用變數？