我如何使用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");

    }
});

---

将

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

var i，切换_类；
对于（i=1；i n*/{toggle_class=“panel push right”；}
$（“.panel”+i）.toggleClass（toggle_类）；
}

将

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

var i，切换_类；
对于（i=1；i n*/{toggle_class=“panel push right”；}
$（“.panel”+i）.toggleClass（toggle_类）；
}

这可能有点牵强，但假设所有元素都具有相同的类别（甚至可能是

。滑动面板

？）且有序，即

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

var$panels=$（“.slided panels”）。单击（函数（）{
var n=$（this.attr（“number”）-1；
$panels.toggleClass（函数（索引）{
返回索引===n？
“面板激活”：
（索引

---

让jQuery处理元素遍历。

这可能有点牵强，但假设所有元素都具有相同的类（甚至可能是

。滑动面板
？）并且是有序的，即

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

var$panels=$（“.slided panels”）。单击（函数（）{
var n=$（this.attr（“number”）-1；
$panels.toggleClass（函数（索引）{
返回索引===n？
“面板激活”：
（索引

让jQuery来处理元素遍历。
什么是'n'变量？@Giannis
$（this）.attr（“number”）；
如果您还包括您的标记，社区可以更好地帮助您。或者更好的是，在jsfiddle.net上创建一个fiddle“n”变量是什么？@Giannis
$（this）.attr（“number”）
如果你还包括你的标记，社区可以更好地帮助你。或者更好的是，在jsfiddle.net上创建一个fiddle注意，我使用
==
与
n
进行比较。这需要
n
也是一个数字。如果你想让JavaScript执行隐式转换，请随意将其更改为
==
，或者确保使用
parseInt
（）。请注意，我使用
==
与
n
进行比较。这需要
n
也是一个数字。如果希望JavaScript执行隐式转换，请随意将其更改为
=
，或者确保使用
parseInt
（）。