使用jQuery更改图像源

我的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);
    }
});

2009-02-16 19:27:48

其他回答

可以使用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);
    }
});

2009-02-16 19:27:48

更多信息。我尝试在jquery中使用attr方法为广告图像设置src属性，语法如下：$（“#myid”）.attr（'src'，'/images/sample.gif'）；

此解决方案很有用，而且可以工作，但如果更改路径，也会更改图像的路径，并且无法工作。

我一直在寻找解决这个问题的方法，但一无所获。

解决方案是将“\”放在路径的开头：$（“#myid”）.attr（'src'，'\images/sample.gif'）；

这个技巧对我很有用，我希望它对其他人有用。

2016-07-20 10:01:23

希望这能奏效

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

2018-05-21 12:45:54

如果不仅有jQuery或其他资源清除框架-每个用户每次都要下载很多kb，只是为了一个简单的技巧-而且还有原生JavaScript（！）：

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

这可以写得一般而优雅：

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

2011-09-13 21:44:03

当改变图像源时，人们会犯的一个常见错误是不等待图像加载来执行后续操作，如成熟的图像大小等。在图像加载之后，您需要使用jQuery.load（）方法来执行操作。

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

编辑原因：https://stackoverflow.com/a/670433/561545

2012-03-22 16:35:49

使用jQuery更改图像源

推荐文章

最新文章

标签