JavaScript的showDiv函数存在Bug，多按钮触发无法正确显示对应内容

嘿，我来帮你搞定这个小问题！你现在遇到的核心问题是重复定义了同名的showDiv函数——在JavaScript里，如果你定义多个同名函数，后面的会直接覆盖前面的，所以不管你点哪个按钮，实际执行的都是最后那个showDiv，自然只会显示txt3和nxt3的内容啦。

下面给你两种简单的解决方法，选你觉得顺手的来用：

方法1：给函数传参数（原生JS写法） #

我们把函数改成接受一个标识参数，让它知道要显示哪一组内容：

修改后的JS代码： #

function showDiv(index) {
  // 可选：先隐藏所有的内容块，确保每次只显示当前点击的那组
  document.querySelectorAll('.answer_list').forEach(item => {
    item.style.display = 'none';
  });
  document.querySelectorAll('.nxt').forEach(item => {
    item.style.display = 'none';
  });
  
  // 显示对应index的内容
  document.getElementById(`txt${index}`).style.display = "block";
  document.getElementById(`nxt${index}`).style.display = "inline";
}

修改后的HTML按钮部分： #

把每个按钮的onclick改成传对应数字的参数：

<input type="button" name="answer" value="BOUTON 1" onclick="showDiv(1)" class="btninfo" />
<input type="button" name="answer" value="BOUTON 2" onclick="showDiv(2)" class="btninfo" />
<input type="button" name="answer" value="BOUTON 3" onclick="showDiv(3)" class="btninfo" />

方法2：用jQuery事件绑定（更优雅） #

既然你已经引入了jQuery，我们可以用它的事件绑定功能，不用写内联的onclick，代码更整洁：

修改后的HTML按钮部分： #

给每个按钮加一个data-target属性，标记对应的内容组：

<input type="button" name="answer" value="BOUTON 1" class="btninfo" data-target="1" />
<input type="button" name="answer" value="BOUTON 2" class="btninfo" data-target="2" />
<input type="button" name="answer" value="BOUTON 3" class="btninfo" data-target="3" />

修改后的JS代码： #

$(document).ready(function() {
  // 给所有.btninfo按钮绑定点击事件
  $('.btninfo').click(function() {
    const targetNum = $(this).data('target');
    
    // 隐藏所有内容块
    $('.answer_list, .nxt').hide();
    
    // 显示对应目标的内容
    $(`#txt${targetNum}`).show();
    $(`#nxt${targetNum}`).show();
  });
});

这样不管你后续加多少个按钮，只要给它们加对应的data-target属性，代码都不用额外修改，扩展性更好～

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