如何将重复的jQuery点击事件代码改写为动态代码？

当然可以！你的代码确实存在大量重复逻辑，我们可以通过统一事件绑定+利用元素标识关联的方式来重构，让代码更简洁、易维护，同时完全保留原有功能。

核心优化思路 #

1. 用属性选择器一次性选中所有目标按钮，避免重复绑定事件
2. 利用按钮的id与对应li的class的关联性（都是linkN格式），动态匹配目标元素
3. 把重复的移除/添加类的逻辑统一封装在一个事件处理函数里

重构后的完整代码 #

HTML（无需修改）

<div id="table-filters">
 <ul>
 <li class="link1">link 1</li>
 <li class="link2">link 2</li>
 <li class="link3">link 3</li>
 <li class="link4">link 4</li>
 <li class="link5">link 5</li>
 </ul>
</div>
<p>
 <button id="link1">link1 Button</button>
 <button id="link2">link2 Button</button>
 <button id="link3">link3 Button</button>
 <button id="link4">link4 Button</button>
 <button id="link5">link5 Button</button>
</p>

CSS（修正一处拼写错误：corsor → cursor）

.red { color: red; }
li { float:left; margin-right: 10px }
p { float: left; width: 100%; margin-top: 50px; }
button { cursor: pointer; }

优化后的jQuery代码

// 选中所有id以"link"开头的按钮，绑定统一的点击事件
$('[id^="link"]').click(function() {
  // 移除所有li的red类
  $("#table-filters>ul>li.red").removeClass("red");
  // 获取当前按钮的id，用它匹配对应的li并添加red类
  $("." + this.id).addClass('red');
});

优化后的优势 #

• 减少冗余代码：从原来的5个重复事件函数，简化为1个通用函数，代码量直接减少80%
• 扩展性极强：如果后续新增link6按钮和对应的li，完全不需要修改JS代码，自动适配
• 逻辑更清晰：所有交互逻辑集中管理，后期调整需求时只需修改一处即可

内容的提问来源于stack exchange，提问作者abcid d