JQuery: Comment basculer l'image d'avant en arrière?

Question

J'ai le code HTML suivant:

<div class="listing ref_1"> 
    ... 
    <div><img src="toggleON.png" /></div> 
    ... 
</div> 
<div class="listing ref_2"> 
    ... 
    <div><img src="toggleON.png" /></div> 
    ... 
</div> 

<div class="listing ref_3"> 
    ... 
    <div><img src="toggleON.png" /></div> 
    ... 
</div> 

Ce que je veux faire est de changer l'image par programmation toggleON.png-toggleOFF.png.

Je suis en train d'utiliser le code suivant pour le faire, mais il ne fonctionne pas:

$('.ref_2').src("toggleOFF.png"); 

Quelqu'un sait ce que je fais mal parce que le code ne fonctionne pas ci-dessus.

De plus, existe-t-il une meilleure façon de gérer cela?

Answer 1

des points » .ref_2' à la div, vous devrez obtenir à l'image dans le div

$('.ref_2 img').attr("src","toggleOFF.png"); 

serait probablement le faire pour vous.

Answer 2

Vous devez sélectionner la balise img dans le côté .ref_2

$('.ref_2 img').attr("src","toggleOFF.png"); 

Il pourrait être préférable que de mettre la définition de l'image dans les classes CSS et swaps.

<style> 
.toggleOn div{ 
    background: url('toggleOn.png') no-repeat; 
} 
.toggleOff div{ 
    background: url('toggleOff.png') no-repeat; 
} 
</script> 

<div class="listing ref_1 toggleOn"> 
    ... 
    <div></div> 
    ... 
</div> 
<div class="listing ref_2 toggleOn"> 
    ... 
    <div></div> 
    ... 
</div> 

<div class="listing ref_3 toggleOn"> 
    ... 
    <div></div> 
    ... 
</div> 

<script> 
$('.ref_2').removeClass('toggleOn').addClass('toggleOff'); 
</script> 

Cela rend vraiment facile de changer l'image et vous permet d'utiliser la classe comme une bascule d'état si vous devez vérifier ultérieurement.

De même, il semble que vous utilisiez ref_ # comme identifiant unique, si c'est le cas, il serait préférable d'en faire l'ID du div, ce qui accélérera la capacité de jQuery à trouver l'élément.

Answer 3

Ce que je veux faire est de mettre les images dans mon document principal dans une div cachée, comme:

<div style="position: absolute; visibility: hidden"> 
    <img id="toggleON" src="/whatever/toggleON.png" .../> 
    <img id="toggleOFF" src="/whatever/toggleOff.png" .../> 
</div> 

De cette façon, ils sont tous les deux dans le cache du navigateur. Ensuite, pour passer une image de l'un à l'autre, vous pouvez faire quelque chose comme:

$(".whatever img").replaceWith($("#toggleON").clone()); 

Answer 4

Une autre solution est de mettre à la fois l'image de la position absolue, avec le par défaut on est mis à l'avant (avec z -index propriété).

En survol de la souris, vous pouvez masquer celui qui se trouve à l'avant et l'image basculée s'affichera. L'avantage de l'utilisation de cette méthode est que vous pouvez utiliser la technique d'animation pour la rendre encore plus lisse. C'est ce que j'ai fait here. (Il serait mieux si vous avez un div wrapper supplémentaire et définir l'événement de survol de la souris sur elle)