多按钮切换不同内容异常：点击第二个按钮内容无变化

开发网站功能模块时，需要两个按钮分别触发显示不同消息组，但点击第二个按钮后内容无变化。原代码如下：

原HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnClick">Section one</button>
<button id="btnClick2">Section two</button>

<div id="1">
    <p>Section one. Message one.</p>
</div>

<div id="2" style="display:none;&quot;">
    <p>Section one. Message two.</p>
</div>

<div id="3" style="display:none;&quot;">
    <p>Section two. Message one.</p>
</div>

<div id="4" style="display:none;&quot;">
    <p>Section two. Message two.</p>
</div>

原JavaScript代码 #

$('#btnClick').on('click', function () {
    if ($('#1').css('display') != 'none') {
        $('#2').show().siblings('div').hide();
    } else if ($('#2').css('display') != 'none') {
        $('#1').show().siblings('div').hide();
    } else {
        $('#1').show().siblings('div').hide();
    }
});

$('#btnClick2').on('click', function () {
    if ($('#3').css('display') != 'none') {
        $('#4').show().siblings('div').hide();
    } else if ($('#4').css('display') != 'none') {
        $('#3').show().siblings('div').hide();
    } else {
        $('#3').show().siblings('div').hide();;
    }
});

问题分析 #

1. HTML语法错误：ID为2、3、4的div的style属性中存在错误的转义引号"，导致浏览器无法正确解析display:none样式，元素显示状态的判断逻辑完全失效。
2. jQuery逻辑缺陷：
   • 使用siblings('div')会隐藏所有同级div，包括其他按钮对应的消息区块，干扰了第二组消息的显示逻辑；
   • 判断显示状态的逻辑冗余，且第二个按钮的回调函数最后一行多了一个无效分号；
   • 硬编码ID的方式导致逻辑耦合度高，容易出错。

修复后的代码 #

修复后的HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnClick">Section one</button>
<button id="btnClick2">Section two</button>

<div class="section-group group-1" id="1">
    <p>Section one. Message one.</p>
</div>

<div class="section-group group-1" id="2" style="display:none;">
    <p>Section one. Message two.</p>
</div>

<div class="section-group group-2" id="3" style="display:none;">
    <p>Section two. Message one.</p>
</div>

<div class="section-group group-2" id="4" style="display:none;">
    <p>Section two. Message two.</p>
</div>

修复后的JavaScript

// 第一组消息切换逻辑
$('#btnClick').on('click', function () {
    const $group1 = $('.group-1');
    const $visibleItem = $group1.filter(':visible');
    
    if ($visibleItem.length) {
        // 切换到组内下一个元素，无下一个则回到第一个
        const $nextItem = $visibleItem.next('.group-1');
        $visibleItem.hide();
        ($nextItem.length ? $nextItem : $group1.first()).show();
    } else {
        // 组内无可见元素时，显示第一个
        $group1.first().show();
    }
    // 隐藏第二组所有元素
    $('.group-2').hide();
});

// 第二组消息切换逻辑
$('#btnClick2').on('click', function () {
    const $group2 = $('.group-2');
    const $visibleItem = $group2.filter(':visible');
    
    if ($visibleItem.length) {
        const $nextItem = $visibleItem.next('.group-2');
        $visibleItem.hide();
        ($nextItem.length ? $nextItem : $group2.first()).show();
    } else {
        $group2.first().show();
    }
    // 隐藏第一组所有元素
    $('.group-1').hide();
});

优化说明 #

1. 修复了HTML的引号错误，确保display:none样式正常生效；
2. 用类分组管理不同按钮对应的消息区块，避免操作无关元素；
3. 使用:visible选择器直接获取可见元素，判断逻辑更准确简洁；
4. 点击按钮时自动隐藏另一组内容，保证同一时间只显示当前组的消息；
5. 增加了循环切换逻辑，组内消息切换到最后一个后，下次点击回到第一个。

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