Estoy tratando de apuntar a diferentes elementos en la página por su producto de datos, y establecer una regla de que si el producto de datos es un número determinado, entonces ejecutar la función. Pero en este momento, las funciones se ejecutan varias veces y no estoy seguro de por qué.
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>Si desea agregar una etiqueta a un elemento en particular, puede usar esto. ¿Resuelve tu problema?
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>Su función addMessage() está agregando el texto Sale a todos los elementos a través del método .forEach . En su lugar, debe pasarle el elemento que necesita que se le haga .insertAdjacentHTML y luego, dentro de la función, solo actualice ese elemento.
Aquí hay un ejemplo de trabajo. Tenga en cuenta que he combinado las dos declaraciones if en una usando el operador lógico OR (||) .
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>