谁能告诉我这个 switch 语句（javascript）有什么问题？

Question

大家好，它是典型的滑块 - 由用户点击自动控制和控制。问题是当你点击时，如果你在最后一张幻灯片上，它不应该显示右箭头，如果你在第一张幻灯片上，它不应该显示左箭头。如果您在其他任何地方，它应该显示两个箭头。但是，当在最后一张幻灯片上时，它仍然显示向右箭头。但是，在第一张幻灯片上，它正确地不显示左箭头。但是当你进入中间幻灯片时，它不会带回右箭头：

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

感谢您的任何回复。

Answer 1

它正在工作，你只是有一个错字：

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

应该是

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

注意事项：

• 您的代码可以用更优雅的方式重写，您可以使用其他逻辑代替switch 语句，尤其是在jquery 选择器的帮助下。
• 使用firebug，它有助于一般的 javascript 调试和 Web 开发，并且它有一个显示错误的控制台。

Answer 2

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'));