优化J$ plus combine 3 <scripts> into 1

Question

能否请您告诉我您将如何优化这个 J$ 并合并它。基本上，它们是彼此重复的，只是将不同的类添加到不同的元素。

您可以在 this website 上看到 "drawer" - 寻找“免费...”

<script>
$(document).ready(function(){
    $("#drawer-closed").click(function(){
        $(".get-free-program .btn").addClass("expander425");
    });
});
</script>

<script>
$(document).ready(function(){
    $("#drawer-closed").click(function(){
        $(".get-free-program form").addClass("showform");
    });
});
</script>

<script>
$(document).ready(function(){
    $("#drawer-closed").click(function(){
        $(".get-free-program img.arrowToggler").addClass("arrow-flipper");
    });
});
</script>

Answer 1

<script>
$(document).ready(function(){
    $("#drawer-closed").click(function(){
        $(".get-free-program .btn").addClass("expander425");
          $(".get-free-program form").addClass("showform");
 $(".get-free-program img.arrowToggler").addClass("arrow-flipper");
  });
});
</script>

应该做

Answer 2

您可以存储选择器，classNames 在数组中，使用 $.each() 将事件附加到每个选择器，使用 $.each() 的 index 参数添加 className对应选择器索引

$(document).ready(function() {
    var selectors = [".btn", "form", "img.arrowToggler"];
    var c = ["expander425", "showform", "arrow-flipper"];
    $.each(selectors, function(index, el) {
      $("#drawer-closed").click(function() {
        $(".get-free-program " + el).addClass(c[index]);
      });
    })
});

Answer 3

您可以使用链接。比单独加class.

快多了

<script>
    $(document).ready(function(){
        $("#drawer-closed").click(function(){
            var $this = $(this);
            if ($this.hasClass("toggleStart")) {
                $this.removeClass("toggleStart");
                $(".get-free-program").find(".btn").removeClass("expander425").end().find("form").removeClass("showform").end().find('img.arrowToggler').removeClass("arrow-flipper");

            } else {
                $this.addClass("toggleStart");
                $(".get-free-program").find(".btn").addClass("expander425").end().find("form").addClass("showform").end().find('img.arrowToggler').addClass("arrow-flipper");
            }
        });
    });
</script>

优化J$ plus combine 3 <scripts> into 1

Optimize J$ plus combine 3 <scripts> into 1

javascript

optimization

performance

code-snippets