Question

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

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


}

Answer 1

试试这个，

$('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/

编辑：更新小提琴

Answer 2

您可以使用jQuery找到索引。

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

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

找出使用javascript / jQuery点击的图像

2 个答案: