Question

我在表格中显示图像，在文本框中的同一单元格中显示图像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值。例如，如果从1到10有10个图像。无论我点击哪个文本框，它都会显示id 10 我怎样才能获得个人身份证明。希望这是有道理的。如果您需要更多信息，请告诉我。谢谢

这是给你一个想法的图片。

Picture of images

Answer 1

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

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

然后，在你javascript：

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

}

Answer 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);
        });
    }
}

在此代码中，唯一的问题是您为每个输入元素创建一个函数。这些函数具有完全相同的代码。

您可以避免这种情况，在主体上侦听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());
});

Answer 3

  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

如何在图像上单击获取图像ID

3 个答案: