如何优化此JavaScript

How can i optimize this JavaScript

本文关键字：JavaScript 优化 何优化      更新时间：2023-09-26

我正在使用以下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");
 });
});

您可以使用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));
    }
});

try:

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

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

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

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

你试过这个吗？

$(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");
        });
    });
});

如果可能的话，在所有"可点击"的div中添加一个类，并尝试这样的操作：

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