如何將 js 代碼應用於每個 foreach 元素？

Question

我有一個 php/html 代碼，我在其中迭代服務。 我通過js創建模態表單，但是js代碼僅在foreach（php）迭代的第一個元素上觸發。

我該怎么做才能讓 js 處理數組的每個元素？

php/html

<div class="cards">
    <? foreach($catalog_product as $key => $catalog_product_value): ?>
        <div class="card">
            <div class="card__side card__side--front card__side--front-1">
                    <div class="header">
                        <h3><?=$catalog_product_value['name']?></h3>
                    </div>
                    <p class="btn-pink">Подробнее</p>
            </div>
            <div class="card__side card__side--back card__side--back-1">
                <h3><?=$catalog_product_value['header']?></h3>
                <p class="flip-text"><?=$catalog_product_value['title']?></p>
                <?=$catalog_product_value['content']?>
                <button 
                    id="buy_product_form"
                    data-item="product" 
                    data-item_id="<?=$catalog_product_value['product_id']?>" 
                    data-id="card_<?=($key + 1)?>" 
                    data-title="<?=htmlspecialchars($catalog_product_value['header'])?>"
                    <? if (!empty($catalog_product_value['options'])): ?>
                        data-options="<?=htmlspecialchars(json_encode($catalog_product_value['options']), ENT_QUOTES, 'UTF-8')?>"
                    <? else: ?> 
                        data-price="<?=preg_replace('/[^0-9.]+/', '', $catalog_product_value['price'])?>"
                    <? endif; ?>
                    class="pop_maker">
                        <?=$catalog_product_value['price']?>
                </button>
            </div>
        </div>
    <? endforeach;?>
</div>

js代碼

window.onload = function(){
  button = document.getElementById('buy_product_form');
  var atr = button.getAttribute('data-title');
      var id = button.getAttribute('data-id');
      var options = button.getAttribute('data-options');
      var price = button.getAttribute('data-price');
      var item_id = button.getAttribute('data-item_id');
      var item = button.getAttribute('data-item');
      button.id = id;

      var _form = document.createElement('form');
      .....
};

Answer 1

問題是因為您在重復的代碼塊中使用id屬性，並且id在 DOM 中必須是唯一的。 將其更改為class屬性，使用querySelectorAll()而不是getElementById() ，然后在結果集合上使用forEach()循環。 像這樣的東西：

 let buttons = document.querySelectorAll('.buy_product_form'); buttons.forEach(el => { el.addEventListener('click', e => { let button = e.target; let atr = button.dataset.title; console.log(atr); // other logic here... }); });

 <div class="cards"> <div class="card"> <div class="card__side card__side--front card__side--front-1"> <div class="header"> <h3>Name</h3> </div> <p class="btn-pink">Подробнее</p> </div> <div class="card__side card__side--back card__side--back-1"> <h3>Header - Lorem ipsum</h3> <p class="flip-text"> Title </p> Content <button data-item="product" data-item_id="item_id" data-id="card_1" data-title="Lorem ipsum" class="buy_product_form pop_maker"> Price </button> </div> </div> <div class="card"> <div class="card__side card__side--front card__side--front-1"> <div class="header"> <h3>Name</h3> </div> <p class="btn-pink">Подробнее</p> </div> <div class="card__side card__side--back card__side--back-1"> <h3>Header - Foo bar</h3> <p class="flip-text"> Title </p> Content <button data-item="product" data-item_id="item_id" data-id="card_2" data-title="Foo bar" class="buy_product_form pop_maker"> Price </button> </div> </div> </div>

Answer 2

id必須是唯一的，您可以使用 class，如下所示：

// first change id to class:

<button   class="buy_product_form"

然后

const buttons = document.querySelectorAll('.buy_product_form');
buttons.forEach( button => {
  const data = button.dataset;
  var id = data['id']
  console.log(data);
   button.addEventListener('click', e => {
  //write your logic
 })
  ...
});