Question

我有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");

    }
});

Answer 1

如何用{：

替换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);
}

Answer 2

这可能有点延伸，但假设所有元素都具有相同的类（可能它甚至是.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处理元素遍历。

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

2 个答案: