找出使用javascript/jQuery点击了哪个图像

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

您可以通过使用jQuery找到索引。

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

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

Answer 2

试试这个，

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

编辑：更新小提琴