Pourquoi ce code jQuery ne fonctionnera-t-il que dans Firefox?

Question

J'ai un code qui vous permet de faire défiler les images qui sont mises en pleine taille dans une visionneuse. Il remplace juste la source de l'image quand une touche est pressée. Cela fonctionne parfaitement dans Firefox, mais ne semble pas faire quoi que ce soit dans IE, Chrome et Safari (les seuls autres navigateurs que j'ai testés).

Toute aide serait grandement appréciée!

$(document).ready(function() { 

var thisImage = 1; 
var maxImage = $('div#myImageFlow_images > img').length; 

function handleArrowKeys(evt) { 
    switch (evt.keyCode) { 
    case 37: 
     $(function() { 
     if ($('img.highslide-image').attr('src') == 'images/1.jpg') { 
     thisImage = 1; 
     } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') { 
     thisImage = 2; 
     } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') { 
     thisImage = 3; 
     } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') { 
     thisImage = 4; 
     } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') { 
     thisImage = 5; 
     } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') { 
     thisImage = 6; 
     } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') { 
     thisImage = 7; 
     } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') { 
     thisImage = 8; 
     } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') { 
     thisImage = 9; 
     } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') { 
     thisImage = 10; 
     } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') { 
     thisImage = 11; 
     } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') { 
     thisImage = 12; 
     } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') { 
     thisImage = 13; 
     } 
     }); 
     $(function() { 
     if (thisImage == 1) { 
      thisImage = 1; 
      } else { 
      thisImage--; 
     } 

     }); 

     $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' }); 

     var theTitle = $('div#myImageFlow_caption').text(); 

     $('div.highslide-caption').html(theTitle); 

     break;  
    case 39: 
     $(function() { 
     if ($('img.highslide-image').attr('src') == 'images/1.jpg') { 
     thisImage = 1; 
     } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') { 
     thisImage = 2; 
     } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') { 
     thisImage = 3; 
     } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') { 
     thisImage = 4; 
     } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') { 
     thisImage = 5; 
     } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') { 
     thisImage = 6; 
     } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') { 
     thisImage = 7; 
     } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') { 
     thisImage = 8; 
     } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') { 
     thisImage = 9; 
     } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') { 
     thisImage = 10; 
     } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') { 
     thisImage = 11; 
     } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') { 
     thisImage = 12; 
     } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') { 
     thisImage = 13; 
     } 
     }); 
     $(function() { 
     if (thisImage == maxImage) { 
      // Do Nothing.... 
      } else { 
      thisImage++; 
     } 
     }); 

     $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' }); 

     var theTitle = $('div#myImageFlow_caption').text(); 

     $('div.highslide-caption').html(theTitle); 
     break; 
    } 
} 

document.onkeypress = handleArrowKeys; 

}); 

Answer 1

Il s'agit des différents modèles d'événement utilisés entre les navigateurs.

Cette ligne:

document.onkeypress = handleArrowKeys; 

et la propriété codeTouche ne sont pas multi-navigateurs compatibles.

Comme il semble que vous utilisez jQuery, pourquoi ne pas utiliser leur keypress event comme ceci:

$(document).ready(function() { 

var thisImage = 1; 
var maxImage = $('div#myImageFlow_images > img').length; 

    $("body").keypress(function(evt) { 
     switch (evt.which) { 
       case 37: 
         $(function() { 
           if ($('img.highslide-image').attr('src') == 'images/1.jpg') { 
           thisImage = 1; 
           } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') { 
           thisImage = 2; 
           } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') { 
           thisImage = 3; 
           } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') { 
           thisImage = 4; 
           } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') { 
           thisImage = 5; 
           } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') { 
           thisImage = 6; 
           } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') { 
           thisImage = 7; 
           } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') { 
           thisImage = 8; 
           } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') { 
           thisImage = 9; 
           } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') { 
           thisImage = 10; 
           } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') { 
           thisImage = 11; 
           } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') { 
           thisImage = 12; 
           } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') { 
           thisImage = 13; 
           } 
         }); 
         $(function() { 
           if (thisImage == 1) { 
             thisImage = 1; 
             } else { 
             thisImage--; 
           } 

         }); 

         $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' }); 

         var theTitle = $('div#myImageFlow_caption').text(); 

         $('div.highslide-caption').html(theTitle); 

         break;  
       case 39: 
         $(function() { 
           if ($('img.highslide-image').attr('src') == 'images/1.jpg') { 
           thisImage = 1; 
           } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') { 
           thisImage = 2; 
           } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') { 
           thisImage = 3; 
           } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') { 
           thisImage = 4; 
           } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') { 
           thisImage = 5; 
           } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') { 
           thisImage = 6; 
           } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') { 
           thisImage = 7; 
           } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') { 
           thisImage = 8; 
           } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') { 
           thisImage = 9; 
           } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') { 
           thisImage = 10; 
           } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') { 
           thisImage = 11; 
           } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') { 
           thisImage = 12; 
           } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') { 
           thisImage = 13; 
           } 
         }); 
         $(function() { 
           if (thisImage == maxImage) { 
             // Do Nothing.... 
             } else { 
             thisImage++; 
           } 
         }); 

         $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' }); 

         var theTitle = $('div#myImageFlow_caption').text(); 

         $('div.highslide-caption').html(theTitle); 
         break; 
     } 
} 
}); 
}); 

Answer 2

Vous pouvez remplacer votre bloc si d'autre avec une expression régulière BTW, il va raccourcir et simplifier votre code

var re = new RegExp('images/([0-9]+).jpg'); 
var m = re.exec($('img.highslide-image').attr('src')); 
if (m && m.length > 0) { 
    thisImage = m[0]; 
}