img.click（）関数の配列

Question

image_0とimage_1の2つのイメージがあり、クリックするたびにそのイメージのIDを示すアラートを表示します。これを行うために、私はこれらの関数を格納する配列を作成しました（以前の私の問題のために必要でした：https://stackoverflow.com/questions/41003122/looping-in-jquery-only-remembers-last-iteration?noredirect=1#comment69215730_41003122）。

以下のコードは私の試みです。しかし、いずれかの画像をクリックすると何も起こりません。どうして？

HTML：

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

Javascriptを：CreateImageClickFunction(image_id)として

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

Answer 1

は、関数を返して、あなただけのイベントハンドラとしての機能を渡す必要があります。あるいは、既存のHTMLごとに、あなたは、いくつかの任意のデータを格納する必要がある場合、私は$.fn.data()方法やHTMLElement.datasetプロパティを使用して取り出すことができるdata-*先頭にカスタム属性を、使用することをお勧めいたしますでしょうイベント

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

---

をバインドするAttribute Starts With Selector [name^=”value”]を使用することができます

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

Answer 2

は、一般的なクラスを追加しますハンドラを作成し、this

<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のインスタンスを使用します。

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

Answer 3

あなたはそれが非常に複雑書く必要があるのはなぜか？持って

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

：

あなたが非常に簡単に行うことができます：

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

（これは実際には、それぞれに別のリスナーを作成します）

か、このようなonを使用することができます

a。 1つのイベントリスナーのみを使用します。

b。 （たとえば、ajaxを使用してイメージを追加すると、このイベントリスナーは新しいイメージでも動作します）

Answer 4

私はこれを複雑にすると思います。 は、この例に見てください： 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

Answer 5

私はあなたがあなたの元の質問にClosuresを理解していないことにより、overcomplicatedたと思います。これはJSのより高度な「機能」ですが、研究して理解するのに時間を割く価値があります。

しかし、これをjQueryで行うもっと簡単な方法は、セレクタとしてイメージを使用し、そのように繰り返すことです。その後、thisに画像としてアクセスできます。 Here's example code。