如何判断哪个图片被点击了

How to tell which picture was clicked

本文关键字：何判断 判断      更新时间：2023-09-26
                var pic3 = document.createElement("IMG");
                pic3.setAttribute("src", "img/mutantpre.jpg");
                pic3.setAttribute("onclick", "display()");
                pic3.setAttribute("id", "mutantpre");
                pic3.setAttribute("height", "250px");
                pic3.setAttribute("width", "150px");
                document.getElementById("product4").appendChild(pic3);

我试图创建一个功能，设置所有的图片隐藏时，这一个被点击。然而，从这个功能，我不知道哪一个被点击。我怎么知道他们点击了哪一个得到它的id，这样我就可以设置其他的可见性

var pic3 = document.createElement("IMG");
            pic3.setAttribute("src", "img/mutantpre.jpg");
            pic3.setAttribute("onclick", "display('mutantpre')");
            pic3.setAttribute("id", "mutantpre");
            pic3.setAttribute("height", "250px");
            pic3.setAttribute("width", "150px");
            document.getElementById("product4").appendChild(pic3);

通过在函数中传递相同的id点击你可以做到这一点

你也可以这样做

var pic3 = document.createElement("IMG");
                pic3.setAttribute("src", "#");
                pic3.setAttribute("onclick", "display()");
                pic3.setAttribute("id", "mutantpre");
                pic3.setAttribute("height", "250px");
                pic3.setAttribute("width", "150px");
                document.getElementById("product4").appendChild(pic3);
function display(){
   el = document.getElementsByTagName("img");
    for(var i =0;i<el.length;i++){
   el[i].addEventListener("click",function(e){
      alert("the clicked one's id is "+e.target.id);
    });
        }
}

检查工作小提琴

希望这对你有帮助!

var images = document.getElementsByTagName('img');
var activeImage = images[0]; // Assuming the first image is active at first
for(var i = 0; i < images.length; i++) {
    var image = images[i];
    image.onclick = function() {
           activeImage.classList.remove("active");
           this.classList.add("active");
           activeImage = this;
        }
}

显示功能

function display(element){
    var list = document.getElementsByTagName("img");
    for(var i=0; i<list.length ; i++){
        list[i].style.opacity = "0";
    }
    element.style.opacity="1";
}

在你的代码中你必须这样写:

 pic3.setAttribute("onclick", "display(this)");
<<p> 生活例子/strong>
http://jsfiddle.net/W65yA/1/
相关文章：