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


当前回答

无法使用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>

其他回答

如果不仅有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>

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

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

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

我今天也有同样的惊奇,我是这样做的:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

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

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

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

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