如何用单个jQuery函数实现多组button与answer元素的切换功能？

嘿，我明白你现在的需求——想用单个jQuery函数搞定多组按钮和对应文本的切换，而不是写一堆重复代码对吧？原来的代码只能针对单个button和answer元素，确实没法满足多组的情况，我给你两个实用的解决方案，都能实现你的目标！

解决方案1：用数据属性（推荐，灵活易维护） #

这个方法是给每个按钮添加一个数据属性，明确指定它要控制的内容元素，逻辑清晰还不用依赖严格的命名规则。

第一步：编写HTML结构 #

给每个切换按钮加上class="toggle-btn"（用来统一绑定事件），再用data-target属性指定对应的内容块ID：

<button class="toggle-btn" data-target="#answer1">切换答案1</button>
<div id="answer1" style="display: none;">这是答案1的具体内容，点击按钮就能切换显示/隐藏啦</div>

<button class="toggle-btn" data-target="#answer2">切换答案2</button>
<div id="answer2" style="display: none;">这是答案2的具体内容，和按钮2是一一对应的哦</div>

<!-- 新增组的话直接复制上面的结构，改ID和内容就行，不用改JS -->
<button class="toggle-btn" data-target="#answer3">切换答案3</button>
<div id="answer3" style="display: none;">这是答案3的具体内容</div>

第二步：编写统一的jQuery函数 #

只需要一次绑定，就能让所有带toggle-btn类的按钮生效：

$(document).ready(function(){
  // 给所有切换按钮绑定点击事件
  $(".toggle-btn").click(function(){
    // 获取当前按钮对应的目标元素选择器
    var targetElement = $(this).data("target");
    // 对目标元素执行toggle动画
    $(targetElement).toggle(1000);
  });
});

这个方案的好处是扩展性极强，以后要加新的切换组，直接加HTML就行，完全不用修改JS代码，而且每个按钮和内容的对应关系一目了然，后期维护也方便。

解决方案2：通过命名规则关联元素 #

如果你的按钮和内容ID已经有严格的命名规范（比如button1对应answer1，button2对应answer2），也可以通过提取ID里的编号来关联元素。

第一步：编写HTML结构 #

保持你的命名规则：

<button id="button1">切换答案1</button>
<div id="answer1" style="display: none;">这是答案1的内容</div>

<button id="button2">切换答案2</button>
<div id="answer2" style="display: none;">这是答案2的内容</div>

第二步：编写jQuery函数 #

用属性选择器匹配所有ID以button开头的按钮，然后提取编号找到对应的内容：

$(document).ready(function(){
  // 匹配所有ID以button开头的按钮
  $("button[id^='button']").click(function(){
    // 从按钮ID中提取数字部分（比如button1提取出1）
    var itemNumber = $(this).attr("id").replace("button", "");
    // 拼接对应的内容块ID
    var targetId = "#answer" + itemNumber;
    // 执行切换动画
    $(targetId).toggle(1000);
  });
});

这个方案适合已经有固定命名规范的场景，但如果后续命名规则变了（比如改成btn-1这种），就得修改JS里的字符串替换逻辑，灵活性不如数据属性方案。

总结 #

如果是新项目或者可以调整HTML结构，优先选数据属性方案；如果已经有固定的ID命名规则，用命名关联方案也能快速解决问题。两种方法都能实现用单个函数搞定多组切换的需求~

内容的提问来源于stack exchange，提问作者Ernesto Roberts