Question

我和JS一起学习（陡峭）。我想我的JS代码只会触发具有src属性的图像操作：＆＃34; http://placehold.it/350x150＆＃34;单击时更改为目标新链接（320x120）。但是它会将所有图像更改为最新的，任何想法都是PLZ？

完整代码：http://jsfiddle.net/celiostat/nmH8L/34/

HTML：

<img class=icon1 src="http://placehold.it/350x150"/>
<img class=icon2 src="http://placehold.it/140x140"/>
<img class=icon3 src="http://placehold.it/200x100"/>
<img class=icon4 src="http://placehold.it/350x65"/>

JS：

$(document).ready(function() {
$('.icon3').on("click", function() {
    if($('img').attr('src') === 'http://placehold.it/350x150')
        $('img').attr('src', 'http://placehold.it/300x120');
})
})

Answer 1

如果您想将之前的图像恢复到初始状态，那么对于每次点击事件，您都应该执行以下操作。

$('.icon1').on("click", function (e) {
    if ($(e.currentTarget).attr('src') === 'http://placehold.it/350x150') {
        var changedImage = $('[data-image-name="changed_image"]')
        changedImage.removeAttr('data-image-name').attr('src', changedImage.attr('prevSrc'));
        $(e.currentTarget).attr('data-image-name', 'changed_image');
        $(e.currentTarget).attr('prevSrc', 'http://placehold.it/350x150');
        $(e.currentTarget).attr('src', 'http://placehold.it/300x150');
    }
})

Answer 2

$('img')选择所有图片元素。使用$(this)获取触发事件的元素。

Answer 3

将您的代码更改为

$(document).ready(function() {
$('image').on("click", function() {
    if($('img').attr('src') === 'http://placehold.it/350x150')
        $(this).attr('src', 'http://placehold.it/300x120');
    })
})

JS图像源属性触发动作

3 个答案: