使用 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屋！