如何将 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 在 [=28] 中是唯一的=].将其更改为 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
 })
  ...
});

如何将 js 代码应用于每个 foreach 元素？

How do I apply js code to each foreach element?

javascript

php

iteration

foreach

jquery