为for循环中的每个元素赋予不同的ID答案

【问题标题】：Give different ID to each element in for loop为for循环中的每个元素赋予不同的ID
【发布时间】：2017-07-04 08:21:59
【问题描述】：

我有一个远循环，它检查数字并将结果输出到那个数字。

例如，在下图中，“剪切图像”多次显示。我在远循环中有标签，因此它根据次数输出图像。这个数字来自数据库。

我的问题。 显然，第一行中的所有图像都将具有相同的 ID。当前用户只能单击该行的第一个图像。如果可能的话，我想给每个元素不同的 ID。比我想使用 JQuery 添加点击事件。因此，如果我点击第一行中的第 4 张图片，它会发出警告消息，如果我点击第 5 张图片，它会显示不同的警告消息。

如何为远循环中的每个元素分配不同的 ID，这样它只会使第一个图像可点击，而是所有元素都可点击。

我的循环

 <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() {

但我需要帮助为远循环中的每个元素分配不同的唯一性。

提前致谢。

【问题讨论】：

将点击处理程序放在类上，然后访问$(this)以获取点击图像的细节
您的循环似乎不正确。对一些样本数据真的很有帮助。就像'noof10s_vnr'是什么，以及行是什么。您的循环只是一遍又一遍地输出同一行。你已经有一个 id，那就是 $x。你每次都增加它，所以就用那个？
那很好。但目前每行的第一张图片都是可点击的。单行中的所有图像都具有相同的 ID，因此只有第一个是可点击的。我想为一行中的每个元素提供不同的唯一 ID，而不是我可以添加点击事件

标签： php css loops

【解决方案1】：

我认为你在 PHP 中的循环是可以的。问题出在您的 jquery 上，尝试使用 use 属性获取正确的 id 选择器attr("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 代码之后，您可以将其改进以供您使用。

【讨论】：

【解决方案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
}

我会帮你的。

【讨论】：

谢谢 Binhudatta Sahoo。我喜欢这种方法。有没有办法区分每个元素。目前，如果我单击第一行中的任何图像，它将显示相同的 ID。我现在想以不同的方式处理每张图片。
是的@Muhammad Ikram 你可以做到这一点，只需尝试编辑的答案一次。

【解决方案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 是工作代码

【讨论】：