找出使用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/

編輯：更新小提琴