Jquery, Cliquez/Si la fonction Sinon, ne fonctionne pas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> 
<title>If Else</title> 
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script> 
<style TYPE="text/css"> 

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

</style> 
</head> 
<body> 
<script type="text/javascript"> 
$('#portweb').click(function() { 

    if ('li[value*=web] img'.hasClass("hide")) { 
     $('li[value*=web] img').removeClass('hide').addClass('show'); 
    } 
    else if ('li[value*=web] img'.hasClass("show")) { 
     $('li[value*=web] img').removeClass('show').addClass('hide'); 
    } 

}); 
</script> 

<a href="#" id="portweb">Web</a> 
<br /> 

     <ul id="portfolioWrapperSet"> 
      <li value="web dev"><a href="#"><img src="images/portfilio/ph1.jpg" class="hide" /></a></li> 
      <li value="web packaging print media"><a href="#"><img src="images/portfilio/ph2.jpg" class="hide" /></a></li> 
      <li value="tv packaging print media"><a href="#"><img src="images/portfilio/ph3.jpg" class="hide" /></a></li> 
      <li value="web packaging print media social"><a href="#"><img src="images/portfilio/ph4.jpg" class="hide" /></a></li> 
     </ul> 


</body> 
</html>

Le problème im avoir est réellement obtenir ma fonction pour supprimer la classe « .hide » puis ajoutez la classe « .show » par mon instruction if.Jquery, Cliquez/Si la fonction Sinon, ne fonctionne pas

Source

2010-02-10 Starboy

Vous essayez de manipuler le DOM avant qu'il ne soit prêt. Essayez d'encapsuler votre code dans une instruction document.ready. Aussi dans vos ifs que vous essayez d'appeler la méthode hasClass sur une chaîne non définie:

$(function() { 

    $('#portweb').click(function() { 

     if ($('li[value*=web] img').hasClass("hide")) { 
      $('li[value*=web] img').removeClass('hide').addClass('show'); 
     } 
     else if ($('li[value*=web] img').hasClass("show")) { 
      $('li[value*=web] img').removeClass('show').addClass('hide'); 
     } 

    }); 

});

Source

2010-02-10 17:49:26

Merci Darin, cela a fonctionné. Maintenant j'ai eu ceci en même temps dans un $ (document) .ready (function() {}); et n'a toujours pas eu de succès, mais merci pour votre réponse. (Cela a soulevé un autre problème en fait) – Starboy

Vous devriez utiliser les méthodes .show() et .hide() vraiment comme ce que vous essayez de faire est ce pour quoi ils ont été conçus.

Vous devez envelopper votre code dans une fonction qui sont exécutées lorsque l'événement prêt est élevé

$(function() { /* code here */ });

Il devrait être comme si

$(function() { 

    $('#portweb').click(function() { 

     if ('li[value*=web] img'.hasClass("hide")) { 
      $('li[value*=web] img').removeClass('hide').addClass('show'); 
     } 
     else if ('li[value*=web] img'.hasClass("show")) { 
      $('li[value*=web] img').removeClass('show').addClass('hide'); 
     } 

    }); 

});

Source

2010-02-10 17:49:25

Merci pour la réponse Russ! – Starboy

Aucun problème. Je mettrais également en cache l'objet jQuery dans une variable afin de ne pas chercher le Dom à chaque fois pour obtenir les mêmes éléments. –

Essayez de changer si elle est conditionnelle à quelque chose comme ceci:

if ($('li[value*=web] img').hasClass("hide")) { 
     $('li[value*=web] img').removeClass('hide').addClass('show'); 
    } 
    else if ($('li[value*=web] img').hasClass("show")) { 
     $('li[value*=web] img').removeClass('show').addClass('hide'); 
    }

Source

2010-02-10 17:50:35

Jquery, Cliquez/Si la fonction Sinon, ne fonctionne pas

Répondre

Questions connexes