多个按钮在foreach循环中都有，但是只有第一个按钮可以单击。 如何使所有按钮都可以单击？

Question

<? foreach(.........){                      

<select id = "RelationshipSelect" name = 'RelationshipSelect' disabled>
                                //some codes implement                                                          
                        </select>`enter code here`

                        <input type = 'text' value = "<? echo ... ?>" id = "affectedSystems_0" name = 'affectedSystems_0' readonly> 

                                    <input type = "button" id = 'findAffectedSystems_0' value = 'Find' disabled>
                                        <input type = "button" id = 'removeAffectedSystems_0' value = 'Remove' disabled>


        <?}?>   

如图中所示，CI关系字段数据是使用foreach循环检索的。

在javascript文件中，我将“ findAffectedSystems_0”称为查找按钮ID，但它仅适用于“查找”按钮的第一行。 如何使所有按钮都可以单击。

document.getElementById("findAffectedSystems_0").addEventListener("click", function (){
              //some codes work

});

Answer 1

你应该这样

foreach ($variable as $key => $value) { // $variable should be array
        ?>
        <input type="button" class="common-class" name="findAffectedSystems_<?php echo $key ?>" id="findAffectedSystems_<?php echo $key ?>">
        <input type="button" class="common-class" name="removeAffectedSystems_<?php echo $key ?>" id="removeAffectedSystems_<?php echo $key ?>">
        <?php
    }

如果您需要对每个btn进行单独的操作，请使用id属性；否则，对于常见操作，应使用class属性