如何使用Javascript或jQuery简化此操作?

时间:2015-01-07 22:56:47

标签: javascript jquery

我有4个垂直滑动面板,我正在使用以下代码。有什么方法可以简化代码吗?

$(".sliding-panels").click(function() {
    var n = $(this).attr("number");

    $(".panel" + n).toggleClass("panel-active");

    if (n == 1) {
        $(".panel2").toggleClass("panel-push-right");
        $(".panel3").toggleClass("panel-push-right");
        $(".panel4").toggleClass("panel-push-right");
    }
    else if (n == 2) {
        $(".panel1").toggleClass("panel-push-left");
        $(".panel3").toggleClass("panel-push-right");
        $(".panel4").toggleClass("panel-push-right");
    }
    else if (n == 3) {
        $(".panel1").toggleClass("panel-push-left");
        $(".panel2").toggleClass("panel-push-left");
        $(".panel4").toggleClass("panel-push-right");
    }
    else if (n == 4) {
        $(".panel1").toggleClass("panel-push-left");
        $(".panel2").toggleClass("panel-push-left");
        $(".panel3").toggleClass("panel-push-left");

    }
});

2 个答案:

答案 0 :(得分:5)

如何用{:

替换if语句
var i, toggle_class;
for (i = 1; i <= 4; ++i) {
    if (i === n) { toggle_class = "panel-active"; }
    else if (i < n) { toggle_class = "panel-push-left"; }
    else /* i > n */ { toggle_class = "panel-push-right"; }
    $(".panel" + i ).toggleClass(toggle_class);
}

答案 1 :(得分:1)

这可能有点延伸,但假设所有元素都具有相同的类(可能它甚至是.sliding-panels?)并且是有序的,即

<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
...

你可以这样做:

var $panels = $(".sliding-panels").click(function() {
    var n = $(this).attr("number") - 1;
    $panels.toggleClass(function(index) {
       return index === n ? 
         'panel-active' : 
         (index < n ? 'panel-push-left' : 'panel-push-right');
    });
});

让jQuery处理元素遍历。