javascript - 单击时获取具有自己的迭代按钮的输入值

Question

我已成功将迭代器添加到我的 php foreach 循环中，以便我可以为表中的每一行创建一个唯一的按钮。

<?php $i = 1;?>
@foreach($getPromoCodes as $codes)

    <input type="hidden" name="promo_code_id" id="promo_code_id[{{$i}}]" class="promo_code_id" value="{{ $codes->promo_codet_id }}">

<?php $i++;?>
@endforeach

但是，我无法弄清楚，一旦按下按钮，如何从单击的按钮获取输入的值。这是由于每个按钮与迭代器的唯一性。

var promo_codet_id = document.getElementsByClassName("promo_code_id");

当我控制台记录它时，它返回未定义。

我需要如何更改我的 JS？

Answer 1

你可以这样做:

<div class="elements">
    <?php $i = 1;?>
    <?php foreach($getPromoCodes as $codes): ?>

            <input type="hidden" name="promo_code_id" id="promo_code_id[{{$i}}]" class="promo_code_id" value="{{ $codes->promo_codet_id }}">
            <a href="#" class="btn" data-id="<?= $i ?>">Link </a>

        <?php $i++;?>
    <?php endforeach; ?>
</div>

jquery:

$('.elements').on('click', '.btn', function(e){
   e.preventDefault();
   console.log($(this).data('id'));
});