jQuery入门：如何在选择器中实现加法运算？

核心思路 #

给按钮绑定数据属性存储对应数值，点击时动态拼接目标元素的选择器，再用jQuery的addClass()方法添加类。

步骤示例 #

1. 调整HTML结构（给按钮添加数据属性）

给每个按钮加上data-num属性，用来存储要拼接的数值：

<!-- 示例按钮 -->
<button class="action-btn" data-num="1">对应数值1</button>
<button class="action-btn" data-num="2">对应数值2</button>
<button class="action-btn" data-num="3">对应数值3</button>

<!-- 目标元素示例 -->
<div id="li-a1">A组1号</div>
<div id="li-b1">B组1号</div>
<div id="li-c1">C组1号</div>

<div id="li-a2">A组2号</div>
<div id="li-b2">B组2号</div>
<div id="li-c2">C组2号</div>

2. jQuery实现代码

// 等待DOM加载完成后执行
$(function() {
  // 给所有按钮绑定点击事件
  $('.action-btn').on('click', function() {
    // 获取当前按钮对应的数值
    const targetNum = $(this).data('num');
    
    // 拼接目标元素的选择器：#li-aX, #li-bX, #li-cX
    const targetElements = `#li-a${targetNum}, #li-b${targetNum}, #li-c${targetNum}`;
    
    // 给目标元素添加.act类
    $(targetElements).addClass('act');
    
    // 可选：如果需要每次点击仅保留当前组的.act类，先移除其他元素的类
    // $('[id^="li-"]').not(targetElements).removeClass('act');
  });
});

关键细节说明 #

• 数据属性data-num：用来传递按钮对应的数值，避免硬编码，后期修改数值更方便。
• 选择器拼接：用ES6模板字符串${targetNum}直接把数值拼接到选择器中，jQuery可以直接识别这种动态生成的选择器。
• addClass()方法：jQuery中给元素添加类的基础方法，如果需要切换类（点一下加，再点一下删），可以换成toggleClass('act')。

内容的提问来源于stack exchange，提问作者Raymond Bloom