如何在图像单击上获取图像ID [重复]答案

【问题标题】：how to get image id on image click [duplicate]如何在图像单击上获取图像ID [重复]
【发布时间】：2015-09-30 06:15:47
【问题描述】：

我在表格中显示图像，在文本框中的同一单元格中显示图像 ID。如何获取文本框点击上每个文本框的值

   echo
        "<td style='border:1px solid #F3F5F6;'; align='middle' width='20%'> 

      <figure>
         $imageshow
         <input type='text' size='4' id='imageid' name='imageid'  value='$PHPimageid'  onclick ='displayID();' /> 

     </figure>

      </td>";


    function displayID()
    {
        alert(  document.getElementById("imageid").value  );

    }

imageshow：保存图像字符串以显示图像 PHPimageid：保存图像ID，例如2001

这是一个示例代码。显示图像和图像 id 的 Echo 语句在 while 循环中。

所有文本框都有正确的 id 值，但每次我点击文本框时，它都会取代上次加载的 ID 值。例如，如果从 id 1 到 10 有 10 张图像。无论我点击哪个文本框，它都会显示 id 10 我怎样才能获得个人身份证。希望这是有道理的。如果您需要更多信息，请告诉我。谢谢

这里有图片可以给你一个想法。

【问题讨论】：

试试，document.getElementById("imageid").id 代替 document.getElementById("imageid").value
您可能还想稍微整理一下示例，我知道它是循环中的一个 sn-p，但是有那个“{”可能会让用户感到困惑跨度>
添加完整代码...
@VimalanJayaGanesh 我试过 document.getElementById("imageid").id 输出是：imageid
Ids 应该是唯一的，您将拥有许多与此代码具有相同 id 的元素。

标签： javascript php html image

【解决方案1】：

  function displayID(e)
{
   alert(e.target.id.value);// or just e.target.id

}

您也可以使用事件监听器，它可能会更长，但最好将您的代码与标记分开

var imageId = document.getElementById("imageId");
imageId.addEventListener("click", function(e){  alert(e.target.id.value); });// or just e.target.id

【讨论】：

属性值不存在于属性对象上。所以 e.target.id.value 不正确。您应该单独使用 e.target.id。

【解决方案2】：

您应该避免在 onclick 属性中使用 javascript。就像@David Sulc 所说的那样，你不能有具有相同 id 的 DOM 元素。

因此，对于您的 HTML，您可以忘记 id 和 onclick 属性：

<input type='text' size='4' name='imageid'  value='$PHPimageid'/>

在你的 html 被加载后添加一些 javascript：

var inputs = document.getElementsByTagName("input");
for(var i = 0, n = inputs.length; i < n; ++i) {
    if(inputs[i].name == "imageid") {
        inputs[i].addEventListener("click", function(e) {
            var id = this.value;
            alert(id);
        });
    }
}

在这段代码中，唯一的问题是您为每个输入元素创建一个函数。而且这些函数的代码都是一样的。

您可以避免这种情况，在 body 上监听 click 事件并在函数中验证点击的元素是否是您要查找的输入。在这种情况下，您只需为所有输入创建一个函数，最好的是如果您动态创建输入，您的代码也将有效。

var body = document.getElementsByTagName("body")[0];
body.addEventListener("click", function(e) {
    var item = e.target;
    if(item.tagName == "INPUT" && item.name == "imageid") {
        alert(item.value);
    }
});

最后，如果你想使用 jQuery，你可以用很简单的方式来写：

$("body").delegate("input[name=imageid]", "click", function(e) {
    alert($(this).val());
});

【讨论】：

【解决方案3】：

首先，您不应该在一个页面上有多个具有相同 id 值的 DOM 元素。其次，您可以将点击的元素传递给您的处理程序：

<input type='text' size='4' value='$PHPimageid'  onclick ='displayID(this);' />

然后，在你的javascript中：

function displayID(el)
{
    alert(  el.value  );

}

【讨论】：