我的DOM如下所示:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
当有人单击图像时,我希望图像src更改为<img src=“imgx_off.gif”>,其中x表示图像编号1或2。
这是可能的还是我必须使用CSS来更改图像?
可以使用jQuery的attr()函数。例如,如果img标记的id属性为“my_image”,则可以执行以下操作:
<img id="my_image" src="first.jpg" alt="Insert link 1 alt text here" />
然后,您可以使用jQuery更改图像的src,如下所示:
$("#my_image").attr("src","second.jpg");
要将其附加到单击事件,可以编写:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
要旋转图像,可以执行以下操作:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});