Question

使用以下JavaScript在我的菜单中切换一些信息。

是否可以对其进行优化，因此我只有一个函数而不是n？

$(document).ready(function(){
 $("#km1").click(function(){
   $("#km1tog").slideToggle("slow");
 });
}); 

$(document).ready(function(){
 $("#km2").click(function(){
   $("#km2tog").slideToggle("slow");
 });
}); 

$(document).ready(function(){
 $("#km3").click(function(){
   $("#km3tog").slideToggle("slow");
 });
});

Answer 1

尝试：

$(document).ready(function(){
  $("#km1,#km2,#km3").click(function(){
    $("#"+this.id+"tog").slideToggle("slow");
  });
});

Answer 2

您可以使用for循环并创建IIFE，以保留i。

的值

$(document).ready(function() {
    for (var i = 1; i <= 3; i += 1) {
        (function(i) {
            $("#km" + i).click(function() {
                $("#km" + i + "tog").slideToggle("slow");
            });
        }(i));
    }
});

Answer 3

首先，您只需要一次$(document).ready来电，这样会稍微优化一下。至于其余部分，它在很大程度上取决于标记的结构。

理想情况下，您不会在元素上使用ID，您只需通过它们的关系来引用它们，例如：

$(document).ready(function(){
    $(".top-menu").click(function(){
        $(this).find(".sub-menu").slideToggle("slow");
    });
});

Answer 4

你试过这个吗？

$(document).ready(function() {
    $.each([1,2,3,4,5,6,7,8,9,10], function(i) {
        $("#km" + i).click(function(){
            $("#km" + i + "tog").slideToggle("slow");
        });
    });
});

Answer 5

如果可能的话，为你所有的＆＃34;可点击的＆＃34;添加一个课程。 div并尝试这样的事情：

$(document).ready(function(){
    $(".km").click(function(){
        id = $(this).attr('id');
        $("#"+id+"tog").slideToggle("slow");
    });
});

我该如何优化这个JavaScript

5 个答案: