自动化jquery滑块

Question

我有这个例子：Click!

使用以下jquery：

$(".abox-1").click(function(){
    $("#box-2, #box-3").css({
        zIndex: "-999"
    });
    $("#box-1").css({
        zIndex: "999"
    });
    $("#box-1").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-2, #box-3").stop().delay(1000).animate({
        top: "100%"
    });
});
$(".abox-2").click(function(){
    $("#box-2").css({
        zIndex: "999"
    });
    $("#box-2").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-1, #box-3").css({
        zIndex: "-999"
    });
    $("#box-1, #box-3").stop().delay(1000).animate({
        top: "100%"
    });
});
$(".abox-3").click(function(){
    $("#box-1, #box-2").css({
        zIndex: "-999"
    });
    $("#box-3").css({
        zIndex: "999"
    });
    $("#box-3").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-2, #box-1").stop().delay(1000).animate({
        top: "100%"
    });
});

但是，正如您所看到的，这是非常丑陋的代码！并且占用了大量的空间。我怎么才能把它变成一个函数呢？或者我如何缩短代码？

Answer 1

您应该将abox-i类更改为ids aboxi，并使用以下代码：

function show_box(number) {
  for(var i = 1; i <= 3; i++) {
    if (i == number) { // we need to show this element
      $("#box-" + i).css({
        zIndex: "999"
      }).stop().animate({
        top: "0%"
      }, 1000, "easeInOutExpo");
    } else { // we need to hide this element
      $("#box-"+i).css({
        zIndex: "-999"
      }).stop().delay(1000).animate({
        top: "100%"
      });
    }
  }
}

$("#nav a").click(function() {
  var id = parseInt(this.id.substr(4));
  if (id > 0) show_box(id);   
});

JsFiddle

Answer 2

也许是这样的？

$(document).ready(function(){
    $('a[class^="abox"]').click(function() {
        if (this.className == 'abox') {
            $('div[id^=box-]').animate({top: '100%'}, 1000, "easeInOutExpo").css({zIndex: "-999"});
        }else{
            var thisbox = $('#'+this.className.replace('a', '')),
                otherbox = $('div[id^=box-]').not(thisbox);

            otherbox.css({zIndex: "-999"}).stop().delay(1000).animate({top: '100%'});
            thisbox.css({zIndex: "999"}).stop().animate({top: '0%'}, 1000, "easeInOutExpo");
        }
    });
});

FIDDLE​