Question

我有span个元素，其中包含img标记。

<span id = "span1" class="span-class">
    <img src="img.jpg"/>
</span>
<!--Another such span elements -->
<span id = "span123" class="span-class">
    <img src="img.jpg"/>
</span>

img.jpg是在第一次加载页面时应为任何span呈现的净图像。当我点击第一次点击img.jpg的{{1}}元素时，我希望first_clicked_img.jpg被替换为span。现在，当我点击跨度时，我希望span和first_clicked_img.jpg相互替换。如何使用second_clicked_img.jpg，或者如果更简单，使用纯jQuery？

Answer 1

您应该将onclick个事件绑定到您的span元素，然后隐藏 #span1和显示 {{1} }。

向后相同的事情。在点击元素＆＃34; #span123 隐藏 #span123和显示 span123。

问候

Answer 2

$(".span-class").click(function() {
    var img = $(this).find("img");
    var new_src;
    switch (img.attr("src")) {
        case "img.jpg":
        case "second_clicked_img.jpg":
            new_src = "first_clicked_img.jpg";
            break;
        case "first_clicked_img.jpg":
            new_src = "second_clicked_img.jpg";
            break;
    }
    img.attr("src", new_src);
});

Answer 3

根据我对您的问题的理解，您希望第一次点击时将img更改为first_clicked_img，第二次点击时更改second_clicked_img，对吧？这应该可以帮助你解决它

var clicks = 0;
$('span').on('click', function(){
    if(clicks == 0){
        clicks = 1;
        $(this).find('img').attr('src','first_clicked_img.jpg');
    }else if(clicks==1){
        clicks = 0;
        $(this).find('img').attr('src','second_clicked_img.jpg');

    }
});

我在第二个clicks中将if重置为0，因为在随后点击span时，它会更改回first_clicked_img这就是你想要，对吗？

JavaScript / jQuery更改了img图片

3 个答案: