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

Finding out which image that have been clicked on using javascript/ jQuery

本文关键字：单击 图像 查找 javascript jQuery 使用      更新时间：2023-09-26

我正在制作一种图库，目的应该是，如果你点击一个在屏幕上显示的更大的图像。对于图像，它应该是一个标题和一个文本。我的问题是，我如何找到被点击的那一个，以便显示正确的图像、正确的文本和标题？

通过使用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"));

}

试试这个，

$('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;
        }
    })
});

这是一把小提琴：

http://jsfiddle.net/v4n4LdxL/1/

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

示例：

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

这是这种方法的关键：

http://jsfiddle.net/v4n4LdxL/2/

编辑：更新了fiddle

您可以使用jQuery查找索引。

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

$('ul li').click(function(){ alert($(this).index()); });
相关文章：