如何使用Javascript或jQuery来简化它

How can I simplify this using Javascript or jQuery?

本文关键字：jQuery 何使用 Javascript      更新时间：2023-09-26

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

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

相关文章：