11521 sujets

JavaScript, DOM et API Web HTML5

Problème condition jquery

Bonjour à tous,

Je travaille actuellement sur un site drupal, je cherche à changer d'image au hover de la souris. Mon image principal se génére dans une div ".field-item .even", les images secondaires se chargent dans une div ".field-item .odd" qui est en "display:none;"
ses deux div sont elles-même comprise dans une div ".img-prd"

Je cherche à exécuter mon code JQUERY seulement si ma div ".field-item" contient aussi la classe ".odd".

Voici le code html :

"<div class="img-prd">
<div class="commerce-product-field commerce-product-field-field-image field-field-image node-776-product-field-image">
<div class="field field-name-field-image field-type-image field-label-hidden">
<div class="field-items">
<div class="field-item even">
<a href="/robe-occasion/robe-mariee-jesus-peiro-118">
<img typeof="foaf:Image" src="" width="115" height="125" alt="">
</a>
</div>
<div class="field-item odd">
<a href="/robe-occasion/robe-mariee-jesus-peiro-118"><img typeof="foaf:Image"src="" width="115" height="125" alt="">
</a>
</div>
</div>
</div>
</div>
</div>"

Mon Jquery :

"(function ($) {
$(document).ready(function() {

$('.img-prd').each(function() {

$('.img-prd').mouseover(function() {

$(this).find('.even').hide();
$(this).find('.odd').show();

});

$('.img-prd').mouseleave(function() {

$(this).find('.even').show();
$(this).find('.odd').hide();

});

});

});
})(jQuery);"

en faite mon script marche niquel, mais le problème c'est qu'il "hide" même si la div ne contient pas de odd et du coup je me retrouve avec un fond blanc...

J'ai essayé d'ajouter une condition if que j'ai tourné dans tous les sens que je pouvais mais ca ne marchais pas... il continué à me mettre mon script partout!

Merci d'avance!

Cordialement,
B.Mathieu
Modifié par SSKZ (28 Sep 2016 - 14:31)
Salut,

Alors oui : http://dressing-club.com/

Mais j'ai changé le nom du script pour pas qu'il soit chargé vue que ca bug..., du coup il va pas être visible avec firebug.

Merci à toi !
Modifié par SSKZ (28 Sep 2016 - 15:09)
EDIT !!!


ok essaye avec ça 

if ($(this).find(".odd").length > 0){ 
  $(this).find('.even').hide();
  $(this).find('.odd').show();
}

Modifié par JENCAL (28 Sep 2016 - 15:22)
Cela ne marche pas, j'aimerais juste pouvoir faire ma condition qui s'apliquerais uniquement si il y'à une classe "field-item odd" Smiley decu sinon mon systeme de hover fonctione! mais il fonctionne partout, meme s'il n'y à pas 2 images du coup c'est problématique...
Mais pourquoi tu n'applique pas directement le mouseover sur tes items even et odd... au lieu de partir de la div parente et d'essayer de trouver les enfants ?

et essaye : 

$('.img-prd:has(.odd) ').mouseover(function()

Modifié par JENCAL (28 Sep 2016 - 15:56)
et bien pour tout t'avouer je ne connais pas enormement jquery ou java.... je débute donc c'est un peu brouillon! tu pourrais me donner le script que tu me conseille que j'essaye de comprendre ta syntaxe? sinon je vise le parent IMG PRD parce que en faite des classe even ou odd sont générées automatiquement en "pair" "impair" du coup j'ai peur que mon script atteigne d'autre classes ou sont générés even ou odd
Modifié par SSKZ (28 Sep 2016 - 15:58)
C'est super Jencal j'ai réussi ça fonctionne!!! milles merci l'ami ! Cool le forum je reviendrais !
Modifié par SSKZ (28 Sep 2016 - 19:48)
SSKZ a écrit :
et bien pour tout t'avouer je ne connais pas enormement jquery ou java.... je débute donc c'est un peu brouillon! tu pourrais me donner le script que tu me conseille que j'essaye de comprendre ta syntaxe? sinon je vise le parent IMG PRD parce que en faite des classe even ou odd sont générées automatiquement en "pair" "impair" du coup j'ai peur que mon script atteigne d'autre classes ou sont générés even ou odd

Attention, Java n'a absolument rien à voir avec Javascript... Smiley eek
Erreur (hélas) courante.
Modifié par sepecat (28 Sep 2016 - 23:53)
Sujet clos
Aller à