Klasse ersetzen, um Bild auf Klick mit jquery zu ersetzen

Question

Ich las eine Reihe von Artikeln und Antworten hier auf Stack Overflow, aber keiner von ihnen beantwortete meine Frage, wie ich wirklich ein Noob bin, wenn es um jQuery geht und ich nicht bin sicher, wie man das macht.

Ich habe eine HTML-Zielseite, auf der ich versuche, mehrere Bilder anzuzeigen, auf die Sie klicken, und sie werden durch ein anderes Bild ersetzt. Wenn Sie erneut oder auf ein anderes Bild klicken, wird das Original angezeigt.

Ich habe dies so weit:

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

I santa.png standardmäßig angezeigt werden soll und wenn darauf geklickt wurde es bubble.png zu ändern, Standardklasse Bedeutung ist show und wenn auf es ist hide für Sankt geklickt und umgekehrt.

Vielen Dank im Voraus!

Answer 1

Die einfache Möglichkeit besteht darin, toggle() auf den angezeigten und versteckten Bildern aufzurufen, wenn auf eines geklickt wird. Dadurch wird der Anzeigezustand beider Elemente invertieren gleichzeitig:

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

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

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

Wenn Sie tatsächlich die class Werte auf den Elementen ändern möchten, dann können Sie toggleClass() statt:

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

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

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

Answer 2

Da Sie ein Anfänger sind, ist meine bescheidene Bitte, vanillajs gründlich zu lernen, bevor Sie Bibliotheken wie jQuery verwenden.

hier ist ein reiner js Ansatz .. Prost

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

Try this ... wenn Sie nur zwei Bilder ...

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

Dank!

Answer 4

Wenn Sie ein Element anzeigen/ausblenden möchten, empfehle ich Ihnen, .hide() und .show() Es ist pure JQuery und keine Notwendigkeit von CSS.

"Die übereinstimmenden Elemente werden sofort ohne Animation ausgeblendet. Dies entspricht in etwa dem Aufruf.CSS („display“, „none“), mit der Ausnahme, dass der Wert der Anzeigeeigenschaft wird in jQuery-Daten-Cache gespeichert, so dass Anzeige später auf seinen Ausgangswert wieder hergestellt werden“ http://api.jquery.com/hide/

Hier ist ein exemple:

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