Question

我在Stack Overflow上阅读了一些文章和答案，但没有一个回答我的问题，因为我在jQuery方面真的是一个菜鸟，我不知道该怎么做。

我有一个HTML着陆页，我试图在其上显示您点击的几个图像，然后用另一个图像替换它们，再次点击或在另一个图像上显示原始图像。

到目前为止，我有这个：

<input id="inputresponse" name="response" type="text" value="" />

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

我希望默认显示.hide { display: none; } .show { display: block; }，点击后将其更改为santa.png，这意味着默认类为bubble.png，点击它为show为圣诞老人和反之亦然。

提前致谢！

Answer 1

执行此操作的简单方法是在单击一个时在显示和隐藏的图像上调用toggle()。这将同时反转两个元素的显示状态：

＆＃13;

$('.hide, .show').click(function() {
  $(this).closest('div').find('.hide, .show').toggle();
})

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="santa">
  <img class="show" src="images/santa.png" alt="Santa">
  <img class="hide" src="images/bubble.png" alt="Bubble">
</div>
<div class="santa">
  <img class="show" src="images/santa.png" alt="Santa2">
  <img class="hide" src="images/bubble.png" alt="Bubble2">
</div>

＆＃13;

如果您确实要更改元素上的class值，则可以改为使用toggleClass()：

＆＃13;

$('.hide, .show').click(function() {
  $(this).closest('div').find('.hide, .show').toggleClass('hide show');
})

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="santa">
  <img class="show" src="images/santa.png" alt="Santa">
  <img class="hide" src="images/bubble.png" alt="Bubble">
</div>
<div class="santa">
  <img class="show" src="images/santa.png" alt="Santa2">
  <img class="hide" src="images/bubble.png" alt="Bubble2">
</div>

＆＃13;

Answer 2

由于你是初学者，我的谦卑要求是在使用像jquery之类的库之前彻底学习vanillaj。

这是一个纯粹的js方法..干杯

let santaimg = document.getElementById('santa');
let bubbleimg = document.getElementById('bubble');

santaimg.onclick = showBubbleHideSanta;

function showBubbleHideSanta() { 
 santaimg.classList += " hide";
 //santaimg.classList -= "show";
 bubbleimg.classList -= " hide";
 //bubbleimg.classList += "show";
}

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

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Jonathan_G_Meath_portrays_Santa_Claus.jpg/220px-Jonathan_G_Meath_portrays_Santa_Claus.jpg" id="santa" class="show"/>
<img src = "https://sophosnews.files.wordpress.com/2017/05/shutterstock_296886146.jpg?w=780&h=408&crop=1" id="bubble" class="hide"/>

Answer 3

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

HTML

<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>

CSS

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

JS

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

谢谢！

Answer 4

如果你想显示/隐藏一个元素，我建议你使用.hide（）和.show（）它是纯粹的JQuery，不需要CSS。

“匹配的元素将立即隐藏，没有动画。这大致相当于调用.css（”display“，”none“），除了显示属性的值保存在jQuery的数据缓存中，以便显示器稍后可以恢复到其初始值“ http://api.jquery.com/hide/

这是一个例子：

HTML

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

JS（JQuery）

$(".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

替换类以使用jquery替换单击时的图像

4 个答案: