jquery循環點擊圖像交換

Question

我已經創建了一個圖像循環。我希望每個圖像都能單獨與另一個圖像進行交換。這裏是jQuery的我到目前爲止已經寫的：

for (var i = 1; i < 50; i++) { 
    $('article').append('<div class="ps-block" id="' + i + '"><img src="img/bw/' + i + 'bw.png"></div>'); 
} 

$('img').click(function() { 
    var imgid = $(this).attr('id'); 
    $(this).attr("src", "img/color/" + imgid + ".png");  
}); 

我也試圖追加後使用此代碼裏面的for循環，但i結束了自循環已經跑到你點擊每次返回50：

$('img[src="img/bw/' + i + 'bw.png"]').click(function() { 
    $(this).attr("src", "img/color/" + this.id + ".png");  
}); 

謝謝！

Answer 1

這是因爲img元素沒有設置id，所以您將id設置爲父元素div。

$('img').click(function() { 
    var imgid = $(this).parent().attr('id'); 
    $(this).attr("src", "img/color/" + imgid + ".png"); 
}); 

演示：Fiddle

Answer 2

使用.on()和說唱你的代碼DOM ready

Working Fiddle

因爲元素被添加動態。所以你必須使用Event Delegation你不能直接綁定到這些事件。

$(document).ready(function() { 
    $('article').on('click', 'img', function() { 
     var id = $(this).closest('div').attr('id'); 
     $(this).attr("src", "img/color/" + id + ".png"); 
    }); 
}); 

語法

$(elements).on(events, selector, data, handler); 

Answer 3

，你應該使用$（文件）。就緒（）方法來包含你上面寫的功能。