0

我创建了一个 for 图像循环。我希望每个图像在单独单击时与另一个图像交换。这是我到目前为止编写的 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");    
});

谢谢！

4

3 回答 3

0

使用.on()并在DOM 中准备好您的代码

工作小提琴

由于元素是动态添加的，因此您不能将事件直接绑定到它们。因此您必须使用事件委托。

$(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 );
于 2013-10-31T03:51:32.657 回答
0

你应该使用 $(document).ready() 方法来包含你上面写的函数。

于 2013-10-31T03:52:35.883 回答
0

这是因为img元素没有id集合，你有id父div元素的集合。

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

演示：小提琴

于 2013-10-31T03:53:28.103 回答