Question

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

//Block One
jQuery('.top_searchicon').on('click touchstart', (function(e) {
  e.preventDefault();
  jQuery(this).toggleClass('active');
  jQuery('.top_blog_search').toggleClass('active');
}));

//Block Two
jQuery('.searchicon').on('click touchstart', (function(e) {
  e.preventDefault();
  jQuery(this).toggleClass('active');
  jQuery('.blog_search').toggleClass('active');
}));

非常感谢。

Answer 1

您可以使用逗号（,）组合选择器。然后，您可以使用is()和三元组来选择相关元素来设置active类。试试这个：

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

请注意在ready处理程序中使用该参数，这使您仍然可以使用$在document.ready处理程序的范围内引用jQuery。

Answer 2

使用相同的事件处理程序并在事件处理程序中进行检查的另一种方法是将参数传递给事件处理程序。

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个选项会变得非常混乱（如果您只有2个，可能是3个，这很好），例如：

jQuery('.another_searchicon').on('click touchstart', function() { 
    handleClickTouchStart(".another_blog_search"); 
});

下一步是使用-data属性来链接这两个属性这使您能够添加新元素而无需更改任何代码！

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

并更改标记以添加匹配的-data（在此处推测标记）：

<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>

组合/优化两个相同的jQuery块

2 个答案: