Javascript 组合/细化jQuery的两个相同块

我有两个功能完全相同的代码块，但需要独立启动，以防止功能重叠

//第一块
jQuery（'.top_searchicon'）。在（'单击touchstart'）上（函数（e）{
e、 预防默认值（）；
jQuery（this.toggleClass（'active'）；
jQuery（'.top_blog_search'）.toggleClass（'active'）；
}));
//第二区
jQuery（'.searchicon'）。在（'单击touchstart'）上，（函数（e）{
e、 预防默认值（）；
jQuery（this.toggleClass（'active'）；
jQuery（'.blog_search'）.toggleClass（'active'）；
}));您可以使用逗号（
，
）组合选择器。然后，您可以使用
is（）
和三元组来选择相关元素，以设置
活动的
类。试试这个：

jQuery(function($) {
    $('.top_searchicon, .searchicon').on('click touchstart', (function(e) {
        e.preventDefault();
        var $el = $(this).toggleClass('active');
        var targetClass = $el.is('.searchicon') ? '.blog_search' : '.top_blog_search';
        $(targetClass).toggleClass('active');
    });
});

注意在就绪处理程序中使用参数，这使您仍然可以使用
$
在document.ready处理程序的范围内引用jQuery。
使用相同的事件处理程序并在事件处理程序中进行检查的另一种方法是将参数传递给事件处理程序

jQuery('.top_searchicon').on('click touchstart', function() { 
    handleClickTouchStart(".top_blog_search"); 
});
jQuery('.searchicon').on('click touchstart', function() { 
    handleClickTouchStart(".blog_search"); 
});
function handleClickTouchStart(selector)
{
  e.preventDefault();
  jQuery(this).toggleClass('active');
  jQuery(selector).toggleClass('active');
}

这允许您添加新的处理程序，而无需更改处理程序代码（如果使用
。is
（如果只有2个，可能是3个），则会变得非常混乱，例如：


下一步是使用
-data
属性将两者链接起来。

这使您能够在不需要更改任何代码的情况下添加新元素

jQuery('.searchhandler').on('click touchstart', function() {
  e.preventDefault();
  jQuery(this).toggleClass('active');
  var other = jQuery(this).data("related");
  jQuery(other).toggleClass('active');
});

并更改您的标记以添加匹配数据（在此处推测标记）：

top搜索
博客搜索
等

要添加另一个：

<button type='button' class='searchhandler' data-related='.another_search'>another search</button>
<div class='another_search'></div>

另一个搜索
jQuery（'.top\u searchicon.searchicon）。关于…
没问题，很乐意提供帮助
<button type='button' class='searchhandler' data-related='.top_blog_search'>top search</button>
<button type='button' class='searchhandler' data-related='.blog_search'>blog search</button>

<div class='top_blog_search'></div>
...etc

<button type='button' class='searchhandler' data-related='.another_search'>another search</button>
<div class='another_search'></div>