為for循環中的每個元素提供不同的ID

Question

我有一個遠程循環，它檢查數字並將結果輸出到該數字。

例如，在下圖中，“剪切圖像”以倍數顯示。 我在far循環中有標記，因此它根據次數輸出圖像。 而這個數字來自數據庫。

我的問題。 顯然，第一行中的所有圖像都具有相同的ID。 目前用戶只能單擊該行的第一個圖像。 如果可能的話，我想給每個元素提供不同的ID。 比我想用JQuery添加點擊事件。 因此，如果我點擊第一行中的第4張圖像，它會發出警告信息，如果我點擊第5張圖像則會顯示不同的警報信息。

我如何為far循環中的每個元素分配不同的ID，因此它只會使第一個Image可單擊，而是可以單擊所有元素。

我的循環

 <table class="table table-bordered">
    <thead>
    <tbody>
      <tr>
        <?php
        for($x=0; $x < $row['noof10s_vnr']; $x++){ 
            ?>

            <td><img alt="" class="yellow-process center-block " id ="cut-full-roll-<?php echo $row['id_vnr']; ?>" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
        <?php
        }
        ?>

      </tr>
    </tbody>
  </table>

我的jquery選擇器如果我可以給每個元素不同的ID，那么我可以做這樣的事情來將點擊的事件添加到點擊的圖像。

jQuery( "#vinyl-roll-down-<?php echo $row['id_vnr']; ?>" ).click(function() {

但我需要幫助為far循環中的每個元素分配不同的唯一。

提前致謝。

Answer 1

我認為PHP中的循環就是這樣。 問題在於你的jquery，嘗試通過使用use屬性選擇器attr("id")獲得正確的id。

jQuery( ".yellow-process" ).click(function() {
    var selected = jQuery(this).attr("id");
    alert(selected); // to show the selected image id
    // use the variable selected to do something with it.
}

嘗試此jquery代碼后，您可以將其推進以供您使用。

Answer 2

你可以試試這個

在html中：

<table class="table table-bordered">
    <thead>
    <tbody>
    <tr>
        <?php
        for($x=0; $x < $row['noof10s_vnr']; $x++){
        ?>
        <td><img id="image{{$x}}" alt="" class="yellow-process center-block " onclick="imageClick(<?php echo $row['id_vnr']; ?>)" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
        <?php
        }
        ?>

    </tr>
    </tbody>
</table>

在jquery

function imageClick(id) {
    alert(id);
  var imageId = jQuery(this).attr("id");
   alert(imageId);
//    your code
}

我大腿會幫助你。

Answer 3

$( ".yellow-process" ).bind("click",function() {
    var selected = $(this).attr("id");
    alert(selected); // to show the selected image id
    // use the variable selected to do something with it.
});

你的PHP代碼以正確的方式編寫並且正如上面的jquery所期望的那樣工作代碼