我的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来更改图像?


当前回答

希望这能奏效

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

其他回答

如果您多次更新图像,它会被缓存不更新,在末尾添加一个随机字符串:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

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

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

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

解决方案是将“\”放在路径的开头:$(“#myid”).attr('src','\images/sample.gif');

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

您也可以通过以下方式使用jQuery执行此操作:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

如果图像源有多个状态,则可以有一个条件。

我在这里做了一个完全具有这种功能的代码笔。我也会在这里给你一个代码的分解。

代码笔

$(函数){//倾听女孩按钮的点击$('#girl btn').click(函数){//单击女孩按钮后,将#square图像的源更改为女孩PNG$('#square').prop(“src”,“https://homepages.cae.wisc.edu/~ece533/images/girl.png“);});//聆听飞机按钮的点击$(“#plane btn”).click(函数){//单击平面按钮后,将#square图像的源更改为平面PNG$('#square').prop(“src”,“https://homepages.cae.wisc.edu/~ece533/images/airplane.png“);});//聆听水果按钮的点击$(“#fruits btn”).click(函数){//单击水果按钮后,将#square图像的源更改为水果PNG$('#square').prop(“src”,“https://homepages.cae.wisc.edu/~ece533/images/fruits.png“);});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><img src=“https://homepages.cae.wisc.edu/~ece533/images/girl.png“id=”square“/><div><button id=“girl btn”>女孩</button><button id=“plane btn”>平面</button><button id=“fruits btn”>水果</button><a href=“https://homepages.cae.wisc.edu/~ece533/images/“>图像来源</a></div>

这是在Vanilla(或简单的Pure)JavaScript中完成任务的保证方法:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;