Javascript 替换类，以便用jquery替换单击时的图像

我在这里读了很多关于Stack Overflow的文章和答案，但没有一篇回答我的问题，因为在jQuery方面我真的是个笨蛋，我不知道如何做到这一点

我有一个HTML登录页，我试图在上面显示几个你点击的图像，它们被另一个图像替换，当再次点击或在另一个图像上点击时，会显示原始图像

到目前为止，我有：

<div class="santa">
  <img class="show" src="images/santa.png" alt="">
  <img class="hide" src="images/bubble.png" alt="">
</div>

我想在默认情况下显示

santa.png

，当单击将其更改为

bubble.png

，这意味着默认类是

show

，当单击它时，圣诞老人的

hide

，反之亦然

---

提前谢谢

执行此操作的简单方法是在单击一个图像时，对显示的和隐藏的图像调用

toggle（）

。这将同时反转两个元素的显示状态：

$（'.hide，.show'）。单击（函数（）{
$（this）.closest（'div'）.find（'.hide，.show'）.toggle（）；
})

.hide{display:none；}
.show{display:block；}

---

既然你是初学者，我谦虚的要求是在使用jquery之类的库之前彻底学习vanillajs

这里是一个纯js方法。。干杯

让santaimg=document.getElementById（'santa'）；
让bubbleimg=document.getElementById（'bubble'）；
santaimg.onclick=showBubbleHideSanta；
函数showBubbleHideSanta（）{
santaimg.classList+=“隐藏”；
//santaimg.classList-=“显示”；
bubbleimg.classList-=“隐藏”；
//bubbleimg.classList+=“显示”；
}

.show{
显示：块；
}
.隐藏{
显示：无；
}

---

试试这个……如果你只有两张图片

HTML

JS

---

谢谢

如果要显示/隐藏元素，我建议您使用.hide（）和.show（） 它是纯JQuery，不需要CSS

匹配的元素将立即隐藏，没有动画。这大致相当于调用.css（“display”、“none”），只是display属性的值保存在jQuery的数据缓存中，以便以后可以将display恢复为其初始值

以下是一个例子：

HTML

---

我正要发布一个答案，建议使用

.toggleClass（）

方法作为替代方法，但您也介绍了这个方法。无论如何，我不认为你能得到比第一个解决方案更有效的解决方案。@rory mccrossan这对我来说很有效，我现在面临的唯一问题是我有5个div，每个div有2个图像（隐藏和显示），一旦单击其中一个图像，页面上的所有图像都会被更改。你知道如何解决这个问题吗？在这种情况下，你需要找到最近的父项

div

，然后

找到
。隐藏
/
。显示
。我为你更新了答案，向你展示了如何做到这一点，效果非常好！非常感谢。没问题，很高兴为您提供帮助。这似乎只起作用一次。它不会切换。我建议使用
classList.toggle（）
<div class="santa">
                <img class="show" src="http://via.placeholder.com/350x150" alt="img">
                <img class="hide" src="http://via.placeholder.com/250x150" alt="img">
 </div>

.show{
    display:block;
 }
 .hide{
    display:none;
 }
 img{
    max-width:100%;
    height:auto;
    cursor:pointer;
 }

 jQuery('.show, .hide').click(function() {
      jQuery('.show, .hide').toggle();
    });

<div>
    <img class="santa_img" src="images/santa.png" alt="santa">
    <img class="bubble_img" src="images/bubble.png" alt="bubble">
</div>

$(".santa_img").click(function(){

    $(".santa_img").hide();
    $(".bubble_img").show();

})

$(".bubble_img").click(function(){

    $(".bubble_img").hide();
    $(".santa_img").show();

})

$(".bubble_img").hide(); //Hidden by default