使用 jQuery 更改图像源 [英] Changing the image source using jQuery
问题描述
我的 DOM 如下所示:
<div class="c1"><a href="#"><img src="img1_on.gif"></a><a href="#"><img src="img2_on.gif"></a>
当有人点击图像时,我希望图像 src 更改为 <img src="imgx_off.gif">
其中 x
代表图像编号1 或 2.
这是可能的还是我必须使用 CSS 来更改图像?
你可以使用 jQuery 的 attr()一>功能.例如,如果您的 img
标签的 id
属性为my_image",您可以这样做:
然后你可以像这样用jQuery改变你的图像的src
:
$("#my_image").attr("src","second.jpg");
要将其附加到 click
事件,您可以编写:
$('#my_image').on({点击":函数(){$('#my_image').attr('src','second.jpg');}});
要旋转图像,您可以这样做:
$('img').on({点击":函数(){var src = ($(this).attr('src') === 'img1_on.jpg')?'img2_on.jpg': 'img1_on.jpg';$(this).attr('src', src);}});
My DOM looks like this:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
When someone clicks on an image, I want the image src to change to <img src="imgx_off.gif">
where x
represents the image number 1 or 2.
Is this possible or do I have to use CSS to change the images?
You can use jQuery's attr() function. For example, if your img
tag has an id
attribute of 'my_image', you would do this:
<img id="my_image" src="first.jpg"/>
Then you can change the src
of your image with jQuery like this:
$("#my_image").attr("src","second.jpg");
To attach this to a click
event, you could write:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
To rotate the image, you could do this:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
这篇关于使用 jQuery 更改图像源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!