Quelqu'un peut-il me dire quel est le problème avec cette déclaration de commutateur (javascript)?

Question

Salut à tous, c'est votre curseur typique - à la fois automatisé et contrôlé par un clic de l'utilisateur. Le problème est quand vous cliquez, si vous êtes sur la dernière diapositive, il ne devrait pas montrer la flèche droite, et si vous êtes sur la première diapositive, il ne devrait pas montrer la flèche gauche. Si vous êtes ailleurs, il devrait montrer les deux flèches. Cependant, lors de la dernière diapositive, il montre encore la flèche droite. Cependant, quand sur la première diapositive, il ne montre pas correctement la flèche gauche. Mais quand vous arrivez à des diapositives du milieu, il ne ramène pas la flèche droite:

$(".paging").show(); 
$(".image_reel img:first").addClass("active"); 
$active = $(".image_reel img:first"); 

var imageWidth = $(".window").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum; 

$(".image_reel").css({'width' : imageReelWidth}); 

rotate = function(){ 

    var triggerId = $active.attr('src').substring(7,8); 
    var image_reelPosition = (triggerId - 1) * imageWidth; 



    $(".image_reel img").removeClass("active"); 
    $active.addClass("active"); 

    switch ($active.attr('src')) { 
     case "images/4.png": 
      var $lastPic = $active.attr("src"); 
      manageControls($lastPic); 
      break; 
     case "images/1.png": 
      var $firstPic = $active.attr('src'); 
      manageControls($firstPic); 
      break; 
     case "image/2.png": 
      var $standardPic = $active.attr('src'); 
      manageControls($standardPic); 
      break; 
     case "image/3.png": 
      var $standardPic = $actice.attr('src'); 
      manageControls($standardPic); 
      break; 
    } 




    $(".image_reel").animate({ 
     left: -image_reelPosition 
    }, 500); 
}; 

rotateSwitch = function(){ 
    play = setInterval(function(){ 
    if(!$(".paging a").show()) $(".paging a").show(); //This is CRITICAL - this makes sure the arrows reappear after they have been removed 
     $active = $(".image_reel img.active").parent().next().find("img"); 
     if ($active.length === 0){ 
      $active = $('.image_reel img:first'); 
      var $firstPic = $active.attr("src"); 
      manageControls($firstPic); 
     } 
     rotate(); 
    }, 5000); 
}; 

rotateSwitch(); 

$(".paging a").click(function(){ 
    $active = ($(this).attr('id')=='rightCtr') ? $(".image_reel img.active").parent().next().find('img') : $(".image_reel img.active").parent().prev().find('img'); 


    if ($active.length === 0){ 
     $active = $('.image_reel img:first'); 
    } 


    clearInterval(play); 
    rotate(); 
    rotateSwitch(); 


    return false; 
}); 


manageControls = function(whichImg){ 
    (whichImg == "images/4.png") ? $(".paging a#rightCtr").hide() : $(".paging a#rightCtr").show(); 
    (whichImg == "images/1.png") ? $(".paging a#leftCtr").hide() : $(".paging a#rightCtr").show(); 

    if(whichImg != "images/1.png" || whichImg != "images/4.png"){ 
     $(".paging a#rightCtr").show(); 
     $(".paging a#rightCtr").show(); 
    } 

}; 

html:

<div class="window"> 
      <div class="image_reel"> 
       <a href="#"><img src="images/1.png" alt="" /></a> 
       <a href="#"><img src="images/2.png" alt="" /></a> 
       <a href="#"><img src="images/3.png" alt="" /></a> 
       <a href="#"><img src="images/4.png" alt="" /></a> 
      </div> 
     </div> 
     <div class="paging"> 
      <a href="#" id="leftCtr">Left</a> 
      <a href="#" id="rightCtr">Right</a> 
     </div> 
</div> 

Merci pour toute réponse.

Answer 1

L'instruction switch est bizarre, mais c'est OK je pense. Je crois que le problème est avec cette fonction "manageControls". Dans la dernière déclaration if, vous faites deux fois la même chose. Aussi l'expression dans le if sera toujours être vrai.

Je dis que le switch est "bizarre" parce que, eh bien, il est:

switch ($active.attr('src')) { 
    case "images/4.png": 
     var $lastPic = $active.attr("src"); 
     manageControls($lastPic); 
     break; 

OK. Donc pour ce premier case, vous savez maintenant que l'attribut "src" de l'élément actif est "images/4.png". Donc, si vous le savez, pourquoi avez-vous besoin de le faire pour définir la variable "$ lastPic"? Pourquoi avez-vous besoin de ces variables? Pourquoi ne pas s'effondrer tout l'ensemble switch jusqu'à

manageControls($active.attr('src')); 

Answer 2

Il travaille, il vous suffit d'une faute de frappe:

 var $standardPic = $actice.attr('src'); 
           ^

devrait être

 var $standardPic = $active.attr('src'); 

Notes:

• Votre code peut être réécrit d'une manière beaucoup plus élégante, vous pouvez utiliser une autre logique au lieu de l'instruction switch, en particulier avec l'aide de jquery sélecteurs.
• Utilisez firebug, il aide avec le débogage javascript et le développement web en général, et il a une console qui montre des erreurs.