誰能告訴我這個switch語句（javascript）有什麼問題？

嘿所有，它的典型滑塊 - 既可以自動控制，也可以通過用戶單擊進行控制。問題在於當你點擊時，如果你在上一張幻燈片上，它不應該顯示右箭頭，並且如果你在第一張幻燈片上，它不應該顯示左箭頭。如果你在其他地方，它應該顯示兩個箭頭。但是，在上一張幻燈片中，它仍然顯示右箭頭。但是，在第一張幻燈片上時，它不會顯示左箭頭。但是當你到中間的幻燈片，它不帶回右箭頭：誰能告訴我這個switch語句（javascript）有什麼問題？

$(".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>

感謝任何迴應。

來源

2010-09-06 JohnMerlino

你從錯誤控制檯得到什麼輸出？另外，在javascript switch語句中，「default」是強制的嗎？ – Stephen 2010-09-06 14:30:32

我沒有得到任何錯誤。我所知道的是，當我在上一張幻燈片中時，左箭頭不會消失，它應該基於開關狀態。在第一張幻燈片上，左箭頭確實消失，但在第二張幻燈片上時，左箭頭不會返回。 – JohnMerlino 2010-09-06 14:36:57

@Stephen no，默認情況下不是強制性的。 – Pointy 2010-09-06 14:40:37

switch聲明很奇怪，但我認爲沒關係。我認爲問題在於「manageControls」功能。在最後的if聲明中，您可以做同樣的事情兩次。 if中的表達式也將始終爲爲真。

我說，switch是「怪異」，因爲，它是：

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

確定。因此，對於第一個case，您現在知道活動元素的「src」屬性是「images/4.png」。所以，如果你知道，爲什麼你需要再次設置「$ lastPic」變量？爲什麼你需要這些變量？爲什麼不折疊整個switch到

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

來源

2010-09-06 14:32:55 Pointy

在manageControls中有一個問題，它應該在第二個三元組中是leftctr而不是rightctr。但是你的推薦實際上也是有效的。例如，使用switch語句，當它不在第一張和最後一張幻燈片上時，它不會返回這兩個按鈕，但我們的解決方案確實如此。你知道你爲什麼和那個開關沒有嗎？奇怪，因爲他們似乎在做同樣的事情。 – JohnMerlino 2010-09-06 14:45:02

這可能是@aularon發現的問題。 – Pointy 2010-09-06 14:51:13

這是工作，你只是有一個錯字：

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

應該

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

注：

您的代碼可以用更優雅的方式重寫，您可以使用其他邏輯來代替switch語句，特別是在jquery選擇器的幫助下。
使用firebug，它有助於一般的javascript調試和web開發，並且它有一個顯示錯誤的控制檯。

來源

2010-09-06 14:45:28 aularon

誰能告訴我這個switch語句（javascript）有什麼問題？

回答

相關問題