如何简化重复编写的jQuery点击事件处理函数？

Hey，我太懂你现在的痛点了——每次加个新的过滤项就得复制一遍点击事件，代码越写越冗余，以后维护起来也头疼。先看看你当前的实现：

$( ".filter-air" ).click(function() { 
  document.location = "http://url.com" + "?filter=air"; 
}); 
$( ".filter-land" ).click(function() { 
  document.location ="http://url.com" + "?filter=land"; 
}); 
$( ".filter-water" ).click(function() { 
  document.location ="http://url.com" + "?filter=water"; 
});

这种重复代码完全可以通过**数据属性（data-*）**来优化，只需要一个事件处理函数就能搞定所有过滤按钮的跳转需求，而且后续加新的过滤类型也不用改JS代码，超方便！

优化方案步骤： #

1. 调整HTML结构：给所有过滤按钮统一一个类名（比如filter-btn），然后用data-filter属性存储对应的过滤值：

<button class="filter-btn" data-filter="air">过滤航空类文章</button>
<button class="filter-btn" data-filter="land">过滤陆地类文章</button>
<button class="filter-btn" data-filter="water">过滤水域类文章</button>

2. 统一的jQuery事件处理：通过统一的类名绑定点击事件，从data-filter属性里获取值，再拼接URL跳转：

$(".filter-btn").click(function() {
  const filterValue = $(this).data("filter");
  document.location = `http://url.com?filter=${filterValue}`;
});

为什么这样更好？ #

• 代码量骤减，彻底避免重复逻辑
• 扩展性极强：以后要加新的过滤类型（比如filter-sky），只需要在HTML里加个带对应data-filter的按钮就行，JS代码完全不用动
• 可读性更高：过滤值直接写在HTML元素上，逻辑一目了然

内容的提问来源于stack exchange，提问作者Scott Ledbetter