javascript 如何在图片点击时获取图片ID

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31358694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:41:53  来源:igfitidea点击:

how to get image id on image click

javascriptphphtmlimage

提问by Devloper

I am displaying images in a table and image id in same cell in a text box. how can i get value of each text box on text box click

我在文本框中的同一单元格中显示表格中的图像和图像 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: holds the image string to display image PHPimageid: holds image id e.g 2001

imageshow:保存图像字符串以显示图像 PHPimageid:保存图像 id,例如 2001

this is a sample code. Echo statement which displays image and image id is in while loop.

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

All text boxes has right id value but Every time I click on textbox it displaces last loaded ID value . e.g if there are 10 images from id 1 to 10 . no matter which text box i click , it shows id 10 how can i get individual id. Hope this makes sense. if you need further information, d let me know. thanks

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

here is picture to give you an idea.

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

Picture of images

图片图片

回答by David Sulc

First, you're not supposed to have multiple DOM elements with the same id value on one page. Second, you can pass the clicked element to you handler:

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

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

Then, in you javascript:

然后,在你的 javascript 中:

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

}

回答by Sébastien Doncker

You should avoid to us javascript in onclick attribute. And like @David Sulc said it, you must not have DOM elements with the same id.

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

So for your HTML you can just forget the id and onclick attributes:

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

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

And put some javascript after your html has been loaded:

并在您的 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);
        });
    }
}

In this code, the only problem is you create one function for each input elements you have. And these functions have all the same code.

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

You could avoid that, listening the click event on body and verify in the function if the clicked element is the input you look for or not. In that case you have to create only one function for all your inputs and, the best thing is if you create inputs dynamically, your code will be valid too.

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

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

And last, if you want to use jQuery, you could write that with a lot of simplicity:

最后,如果您想使用 jQuery,您可以非常简单地编写它:

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

回答by Prince

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

}

You can use an event listner too it may be longer but it's better to separate your code from the mark up

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

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