img.click（）函數的陣列

我有兩個圖像，image_0和image_1，並且當每個圖像被點擊時，我希望它顯示一個警報，說出該圖像的ID。爲此，我創建了一個數組來存儲這些函數（由於我之前的問題，這是必需的：https://stackoverflow.com/questions/41003122/looping-in-jquery-only-remembers-last-iteration?noredirect=1#comment69215730_41003122）。img.click（）函數的陣列

下面的代碼顯示了我的嘗試。但是，當我點擊任一圖像時，沒有任何反應。爲什麼？

HTML：

<img id="image_0" src="http://placehold.it/350x150" width="300"> 
<img id="image_1" src="http://placehold.it/350x150" width="300">

的Javascript：

$(document).ready(function() 
{ 
    // The number of images shown 
    num_images = 2 

    // List of functions for each thumbnail click. 
    var image_click_functions = new Array(num_images); 

    // Define the function for when the thumbnail is clicked 
    function CreateImageClickFunction(image_id) 
    { 
     return function() { alert(image_id) }; 
    } 

    // Loop through all images, and define the click functions 
    for (i = 0; i < num_images; i++) 
    { 
     image_click_functions[i] = CreateImageClickFunction(i); 
     image_id = "#image_" + i; 
     $(image_id).click(function() 
     { 
      image_click_functions[i]; 
     }); 
    } 
});

來源

2016-12-07 Karnivaurus

這是一種倒退。有一個單一的點擊功能，並從點擊元素中提取信息。 –

由於CreateImageClickFunction(image_id)返回一個功能，你只需要通過功能的事件處理程序。

$(image_id).click(image_click_functions[i]);

或者，按照現有的HTML，您可以使用Attribute Starts With Selector [name^=」value」]綁定事件

$('[id^image_]').click(function(){ 
    //Extract number from ID 
    var idNum = this.id.match(/\d+$/)[0]; 
})

如果你需要存儲一些任意的數據，我會建議你使用data-*前綴自定義屬性，它可以獲取使用$.fn.data()方法或HTMLElement.dataset財產

<img class="image" data-id="0" src="http://placehold.it/350x150" width="300"> 
<img class="image" data-id="1" src="http://placehold.it/350x150" width="300">

腳本

$(parentContainerSelector).on('click','.image',function(){ 
    console.log(this.dataset.id); 
})

來源

2016-12-07 13:48:39 Satpal

但仍然是一個非常糟糕的方式來做到這一點......單個處理程序，並通過屬性識別項目等是要走的路 –

使用'id'和'屬性開始於selector'是組織JS的一種非常模糊的方式。作爲開發人員，使用專用類（例如'.js-img-click'）會更加清晰。 – sweeds

添加一個普通類，創建一個處理，並使用

<img class="image" id="image_0" src="http://placehold.it/350x150" width="300"> 
<img class="image" id="image_1" src="http://placehold.it/350x150" width="300">

JS的this一個實例：

$(".image").click(function() { alert(this.id) });

來源

2016-12-07 13:49:33 tymeJV

我建議的唯一改進就是使其成爲委託事件處理程序。 –

爲什麼你需要寫這麼複雜嗎？

你可以很容易地做到：

$('img').click(function(){ 
    alert($(this).attr('id')); 
}

（這實際上創造了每一個不同的監聽器）

或者你可以使用on這樣的：

$(document).on('click','img',function(){ 
    alert($(this).attr('id')); 
})

具有優點：

a。只使用一個事件監聽器

b。在動態創建的內容上工作（如果您使用ajax添加更多圖像，例如，此事件偵聽器仍然可以在新圖像上工作）

來源

2016-12-07 13:52:10

我認爲你過分複雜化了這一點。對此例子看看： HTML：

$("#container").on("click", "img", function(e){ 
 
     console.log($(this).attr("id")); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
     <img id="image_0" src="http://placehold.it/350x150" width="300"> 
 
     <img id="image_1" src="http://placehold.it/350x150" width="300"> 
 
    </div>

例如： http://codepen.io/xszaboj/pen/PbeypX?editors=1010

來源

2016-12-07 13:54:25 xszaboj

我想你已經在你原來的問題不理解Closures過於複雜。這是JS中更高級的「特性」，但值得花時間研究和理解。

但是，在jQuery中執行此操作的一種更簡單的方法是將圖像用作選擇器，然後以這種方式對它們進行迭代。然後你可以訪問this作爲圖像。 Here's example code。

來源

2016-12-07 13:59:29 sweeds

img.click（）函數的陣列

回答

相關問題