JavaScript IE Mystery

Question

J'ai la fonction JavaScript suivante

function headerBanner(){ 
    var current = $('.bannerImages img:nth-child('+bannerIndex+')').css('display', 'none'); 
    if(bannerIndex== $('.bannerImages img').size()){ 
     bannerIndex= 1; 
    }else{ 
     bannerIndex= (bannerIndex*1)+1; 
    } 
    var next = $('.bannerImages img:nth-child('+bannerIndex+')').css('display', 'block'); 
} 

Dans tous les navigateurs sur la planète, à l'exception de IE (8, 7 ou moins), le code ci-dessus fonctionne correctement. Dans Internet Explorer, ça passe par là et ça n'a aucun effet. J'ai mis des alertes à chaque ligne de la fonction et ils tirent tous, même dans IE, mais la bannière ne change tout simplement pas. Y a-t-il une raison pour expliquer pourquoi?

Le code HTML ci-joint pour cette fonction est la suivante:

<div class='bannerImages'> 
    <img src="FirstImage.jpg" /> 
    <img src="SecondImage.jpg" /> 
    <img src="ThirdImage.jpg" /> 
</div> 

Answer 1

essayez ceci:

DEMO: http://jsbin.com/ipudo/4

$(function(){ 
    $('.bannerImages img:gt(0)').hide(); 
    setInterval(function(){ 
     $('.bannerImages :first-child').fadeOut() 
     .next('img').fadeIn() 
     .end().appendTo('.bannerImages');}, 
     3000); 
});​ 

Answer 2

Essayez d'utiliser le débogueur de script dans les outils de développement IE8 et mettre des points d'arrêt pour vérifier la valeur de bannerIndex. S'il est possible que ce ne soit pas un nombre, vous pouvez utiliser parseInt() pour le convertir en nombre et IsNaN() pour vous assurer que c'est le cas, plutôt que de compter sur les opérations arithmétiques pour le normaliser pour vous.

Answer 3

Une chose que j'ai trouvé avec hide() et show() était que, parfois, si vous définissez l'affichage à aucun, show() ne fonctionnera pas. Donc, je crée toujours l'élément puis j'appelle un hide (0) dessus quand le document est prêt.

Aussi, avez-vous vérifié la longueur de pour vous assurer que ce n'est pas 0?

Dernière chose, $('.bannerImages img').size() n'est pas 1, non? Il serait logique si $('.bannerImages img').size() est 1 et bannerIndex est 1, alors il ne changera rien quand il passe par votre headerBanner();

ps: Je suis sûr que vous ne ferez pas une simple erreur, comme bannerIndex a commencé de 0 au lieu de 1 ...

Oh, d'ailleurs, il y a un firebug pour IE, qui u besoin d'inclure un script dans votre tête