jQuery实现多个显隐控制按钮点击时同步切换文本与样式

API 探路者

2026-10-2

原代码问题说明

仅对当前被点击的单个按钮进行状态操作，未覆盖所有同功能按钮，所以无法同步更新
将用来标识按钮、绑定事件的.HideDisplay类作为切换类删除，被点击过的按钮会丢失该类，后续无法匹配选择器、也不会响应点击事件
反复给单个按钮绑定hover事件，会造成事件重复绑定，存在性能问题，建议将样式逻辑全部放到CSS中实现，减少JS不必要的操作

优化实现方案

1. 新增CSS样式（替换原来JS里的样式、hover操作）

/* 初始为HIDE ALL状态样式 */
.HideDisplay {
    color: black;
    background-color: #f1f1f1;
    border: none;
    padding: 4px 12px;
    cursor: pointer;
}
.HideDisplay:hover {
    background-color: #dedede;
}
/* DISPLAY ALL状态的样式类 */
.HideDisplay.status-show {
    color: white;
    background-color: #009E60;
}
.HideDisplay.status-show:hover {
    background-color: #008000;
}

2. 替换原有JS逻辑

$('.HideDisplay').click(function() {
    // 选中所有同功能按钮
    const $allToggleBtns = $('.HideDisplay');
    // 基于当前点击按钮的状态，判断全局要切换到的目标状态
    const toHideState = $(this).hasClass('status-show');
    if (toHideState) {
        $allToggleBtns.removeClass('status-show').text('HIDE ALL');
        // 此处保留你原有隐藏所有图片的逻辑
    } else {
        $allToggleBtns.addClass('status-show').text('DISPLAY ALL');
        // 此处保留你原有显示所有图片的逻辑
    }
});