jQuery将单击事件合并到一个DRY代码块中

jQuery merge click event into a single DRY code block

本文关键字：一个 DRY 代码 单击 事件 合并 jQuery      更新时间：2023-09-26

这两个代码块本质上是相同的，只是有不同的元素。我该如何将它们合并到一个可重复使用的脚本中

$('.menu-button').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#sidebar').toggleClass('sidebar-open');
    $('#cart').removeClass('cart-open');
    $(document).one('click', function closeMenu (e){
        //console.log("DF");
        if($('#sidebar').has(e.target).length === 0){
            console.log("DF");
            $('#sidebar').removeClass('sidebar-open');
        } else {
            $(document).one('click', closeMenu);
        }
    });
});
$('.cart-button').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#sidebar').removeClass('sidebar-open');
    $('#cart').toggleClass('cart-open');

    $(document).one('click', function closeMenu (e){
        //console.log("DF");
        if($('#cart').has(e.target).length === 0){
            $('#cart').removeClass('cart-open');
        } else {
            $(document).one('click', closeMenu);
        }
    });
});

尝试为click事件定义单个处理程序processMenu；在使用event.target.className 的处理程序中设置选择器elem

    var processMenu = function processMenu(e) {
      var elem = $(e.target.className === "menu-button" ? "#sidebar" : "#cart");
      e.preventDefault();
      e.stopPropagation();
      $("#sidebar").toggleClass("sidebar-open");
      $("#cart").removeClass("cart-open");
      $(document).one("click", function closeMenu (evt){
        //console.log("DF");
        if(elem.has(evt.target).length === 0){
            console.log("DF");
            elem.removeClass("sidebar-open");
        } else {
            $(document).one("click", closeMenu);
        }
      });
    };
    $(".menu-button, .cart-button").on("click", processMenu);

使用逗号：

$('.menu-button, .cart-button').on('click', function(e) {
    var param = $(this).is('.menu-button') ? "sidebar" : "cart";
    e.preventDefault();
    e.stopPropagation();
    $('.cart-open').removeClass('cart-open');
    $('.sidebar-open').removeClass('sidebar-open');
    $('#' + param).toggleClass(param + '-open');
    $(document).one('click', function closeMenu (e){
        //console.log("DF");
        if($("#" + param).has(e.target).length === 0){
            console.log("DF");
            $("#" + param).removeClass(param + '-open');
        } else {
            $(document).one('click', closeMenu);
        }
    });
});

EDIT：另外，使用一个缩写if语句来确定是否是被点击的侧边栏或购物车，在其余部分中使用。

相关文章：