使用javascript/jQuery查找已单击的图像

我正在制作一种图库，目的应该是，如果你点击一个图像，屏幕上会显示一个更大的图像。对于图像，它应该是一个标题和一个文本。我的问题是，我怎样才能知道哪一个被点击了，从而显示正确的图像、文本和标题

通过使用

this.src

我能够找到图像源，但找不到从那里开始的方法。不知道这是否在正确的轨道上

无论如何。以下是我目前的代码：

$(document).ready(function() {

 var gallery = [
            {
                "img" : "img/gallery/gameboy2.png",
                "title" : "GameBoy Color",
                "about" : "A-ball",
                "price" : 99,
                "category" : ["gameboy", "color", "console", "game"]

            },
            {
                "img" : "img/gallery/phone.png",
                "title" : "Hamburger Phone",
                "about" : "What is a smartphone?",
                "price" : 129,
                "category" : ["phone","hamburger"]
            },
            {
                "img" : "img/gallery/gameboy.png",
                "title" : "Nintendo GameBoy",
                "about" : "Things doesnt get better with time. This is the shit.",
                "price" : 499,
                "category" : ["game","console", "gameboy"]
            },
            {
                "img" : "img/gallery/game2.png",
                "title" : "SEGA",
                "about" : "Things doesnt get better with time. This is the shit.",
                "price" : 699,
                "category" : ["game","console", "sega"]
            },
                        {
                "img" : "img/gallery/gameboy2.png",
                "title" : "GameBoy Color",
                "about" : "A-ball",
                "price" : 99,
                "category" : ["gameboy", "color", "console", "game"]

            },
            {
                "img" : "img/gallery/phone.png",
                "title" : "Hamburger Phone",
                "about" : "What is a smartphone?",
                "price" : 129,
                "category" : ["phone","hamburger"]
            },
            {
                "img" : "img/gallery/gameboy.png",
                "title" : "Nintendo GameBoy",
                "about" : "Things doesnt get better with time. This is the shit.",
                "price" : 499,
                "category" : ["game","console", "gameboy"]
            },
            {
                "img" : "img/gallery/game2.png",
                "title" : "SEGA",
                "about" : "Things doesnt get better with time. This is the shit.",
                "price" : 699,
                "category" : ["game","console", "sega"]
            }

];

var submit_search = document.getElementById("submit_search");
submit_search.addEventListener("click", searchItem);

showItemsList(gallery);


/*
    Create a li element and append to already existing ul
    Show an image of the product, and below the image show product title and price
*/

function showItemsList(gallery) {
    var ul = document.getElementById("product_list");
    ul.innerHTML = "";

    for(i =0; i < gallery.length; i++) {

        // get the current product
        var currentProduct = gallery[i];

        // create element li 
        var li = document.createElement('li');                           

        // create product img
        var productImg = document.createElement('img');
        productImg.src = currentProduct.img;
        productImg.className = "thumbnail";
        productImg.addEventListener("click", showItem);
        li.appendChild(productImg); 

        // create caption
        li.appendChild(document.createTextNode(currentProduct.title + " " + currentProduct.price + "kr"));                                         
        ul.appendChild(li);
    }

}

/*
    If someone click on a product, show a larger picture with a caption telling about the product
    If you click the picture again, it minimize back to a thumbnail

*/
function showItem() {

    // display the layer
    document.getElementById("overlay").style.display = "block";

    // add the name of  the product
    var h2 = document.getElementById("header_products");
    var single_item_page = document.getElementById("single_item");
    h2.appendChild(document.createTextNode("Hej"));


}

$（文档）.ready（函数（）{
变量库=[
{
“img”：“img/gallery/gameboy2.png”，
“标题”：“游戏男孩颜色”，
“关于”：“A球”，
“价格”：99，
“类别”：[“游戏机”、“颜色”、“控制台”、“游戏”]
},
{
“img”：“img/gallery/phone.png”，
“标题”：“汉堡包电话”，
“关于”：“什么是智能手机？”，
“价格”：129，
“类别”：[“电话”、“汉堡”]
},
{
“img”：“img/gallery/gameboy.png”，
“标题”：“任天堂游戏男孩”，
“关于”：“事情不会随着时间而好转，这是狗屎。”，
“价格”：499，
“类别”：[“游戏”、“控制台”、“游戏机”]
},
{
“img”：“img/gallery/game2.png”，
“标题”：“世嘉”，
“关于”：“事情不会随着时间而好转，这是狗屎。”，
“价格”：699，
“类别”：[“游戏”、“控制台”、“世嘉”]
},
{
“img”：“img/gallery/gameboy2.png”，
“标题”：“游戏男孩颜色”，
“关于”：“A球”，
“价格”：99，
“类别”：[“游戏机”、“颜色”、“控制台”、“游戏”]
},
{
“img”：“img/gallery/phone.png”，
“标题”：“汉堡包电话”，
“关于”：“什么是智能手机？”，
“价格”：129，
“类别”：[“电话”、“汉堡”]
},
{
“img”：“img/gallery/gameboy.png”，
“标题”：“任天堂游戏男孩”，
“关于”：“事情不会随着时间而好转，这是狗屎。”，
“价格”：499，
“类别”：[“游戏”、“控制台”、“游戏机”]
},
{
“img”：“img/gallery/game2.png”，
“标题”：“世嘉”，
“关于”：“事情不会随着时间而好转，这是狗屎。”，
“价格”：699，
“类别”：[“游戏”、“控制台”、“世嘉”]
}
];
var submit_search=document.getElementById（“submit_search”）；
提交_search.addEventListener（“单击”，搜索项）；
展览项目列表（画廊）；
/*
创建li元素并附加到已存在的ul
显示产品的图片，图片下方显示产品名称和价格
*/
功能展示项目列表（图库）{
var ul=document.getElementById（“产品列表”）；
ul.innerHTML=“”；
对于（i=0；i

您可以使用jQuery查找索引

例如，您可以运行此单击功能发送警报

$('ul li').click(function(){ alert($(this).index()); });

试试这个

$('ul li').click(function(){

    var src = $(this).find('img').attr('src');
    var keepGoing = true;

    $.each(gallery, function(index, obj){

        if (!keepGoing)
               return true;

        if (obj.img == src){

            alert(obj.title);
            keepGoing = false;
        }
    })
});

这是一把小提琴：

为了避免在单击一个图像时遍历所有图像，可以将image src作为gallery变量中的键

例如：

$(function(){

    var gallery = {
         "img/gallery/gameboy2.png" : {
                "title" : "GameBoy Color",
                "about" : "A-ball",
                "price" : 99,
                "category" : ["gameboy", "color", "console", "game"]

            },
          "img/gallery/phone.png": {
                "title" : "Hamburger Phone",
                "about" : "What is a smartphone?",
                "price" : 129,
                "category" : ["phone","hamburger"]
            }
    };

    $('ul li').click(function(){

        var src = $(this).find('img').attr('src');
        var img = gallery[src];

        alert(img.title);

    });

});

下面是该方法的要点：

---

Edit:updated fiddle

当您将任何元素添加到页面中时，您可以将“onClick”回调附加到该元素。单击项目时将调用onClick中提到的函数。使用onClick传递的事件将标识单击了哪个元素。我使用了“addEventListener”听说这是一种更好的方法，而不是onClick。因此，我只是将其添加到我的数组下，而不关心函数

showItem

？您可以在事件开始时用任何您想要调用的函数替换上面示例中的

警报

，包括

showItem

：）非常感谢您的帮助，但是jQuery对我来说仍然有点困难。最后在每个img元素上添加了一个id，并使用

this.id

来获得正确的结果。