Question

我正在创建模板，现在当有人单击图标时，我的搜索和导航将在全屏弹出窗口中打开。我为此设置了两个图标。＆为处理点击请求，我编写了以下代码：

  $(".demo-menu > a").on("click", function(){
    $(this).parent().addClass('demo-show-menu');
  });
  $(".demo-menu-close").on("click", function(){
    $('.demo-menu-close').closest('.demo-menu ').removeClass('demo-show-menu');
  }); 

  $(".demo-search > a").on("click", function(){
    $(this).parent().addClass('demo-show-search');
  });
  $(".demo-search-close").on("click", function(){
    $('.demo-search-close').closest('.demo-search ').removeClass('demo-show-search');
  });

我仍处于javascript学习阶段。但是我可以理解，由于图标的两段代码是相同的，因此我可以将它们组合为一个，以使代码看起来更专业。有人可以告诉我如何实现这一目标吗？

Answer 1

您可以将添加侦听器的方法导出到方法中。

function addOnClickListeners(popup_type) {
    $(".demo-" + popup_type + " > a").on("click", function(){
        $(this).parent().addClass('demo-show-' + popup_type);
    });
    $(".demo-" + popup_type + "-close").on("click", function(){
      $('.demo-' + popup_type + '-close').closest('.demo-' + popup_type + ' ').removeClass('demo-show-' + popup_type);
    });
}

注意：我将'menu'替换为方法参数popup_type。
然后，您将使用不同的参数调用该方法，以将侦听器注册到不同的弹出窗口。

addOnClickListeners("menu");
addOnClickListeners("search");

改进弹出式jQuery代码以符合市场标准

1 个答案: