我的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 click()更改图像源

元素:

    <img class="letstalk btn"  src="images/chatbuble.png" />

代码:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

其他回答

您应该向图像标记添加id属性,如下所示:

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

然后您可以使用此代码更改图像的来源:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

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

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

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

希望这能奏效

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

简短但准确

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );

let图片=["https://picsum.photos/id/237/40/40“,//任意-例如:”img1_on.gif“,"https://picsum.photos/id/238/40/40“,//任意-例如:”img2_on.gif“];$(“#d1 img”).click(e=>e.target.src=pic[e.target.src匹配(pic[0])?1:0] );<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><div id=“d1”><div class=“c1”><a href=“#”><img src=“img1_on.gif”></a><a href=“#”><img src=“img2_on.gif”></a></div></div>

无法使用CSS更改图像源。

唯一可能的方法是使用Javascript或任何类似jQuery的Javascript库。

逻辑-

图像位于一个div中,并且该图像没有类或id。

因此,逻辑将是选择图像所在的div中的元素。

然后使用循环选择所有图像元素,并使用Javascript/jQuery更改图像src。

带有演示输出的示例代码-

$(文档).ready(函数){$(“button”).click(函数){$(“#d1.c1 a”).each(函数){$(this).children('img').attr('src','https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');});});});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js“></script><div id=“d1”><div class=“c1”><a href=“#”><img src=“img1_on.gif”></a><a href=“#”><img src=“img2_on.gif”></a></div></div><button>更改图像</button>