时间戳

首页 > 解决方案 > 改进弹出 jquery 代码以符合市场标准

javascript - 改进弹出 jquery 代码以符合市场标准

问题描述

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

  $(".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 的阶段。但是我可以理解，由于两个图标的代码是相同的，我可以将它们组合在一起，使代码看起来更专业。有人可以告诉我如何实现这一目标吗？

标签： javascriptjquery

解决方案

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

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);
    });
}

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

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

推荐阅读