jQuery多按钮点击显隐元素的通用精简代码实现方案

重构核心逻辑是把重复的交互流程抽成统一公共逻辑，可变的操作目标通过配置或DOM自定义属性维护，既完全保留原有交互效果，又能实现全局复用，后续新增同类型交互不需要重复写逻辑。

方案1：零修改原有DOM结构 #

不需要改动现有HTML代码，只需要把原有重复的JS替换为如下代码即可，后续新增交互组只需要在配置数组里加对应项：

// 统一维护所有切换组的映射关系
const toggleConfig = [
  { activeBtn: '.show', oppositeBtn: '.hide', content: '.helloworld', isShow: true },
  { activeBtn: '.hide', oppositeBtn: '.show', content: '.helloworld', isShow: false },
  { activeBtn: '.ok', oppositeBtn: '.cancel', content: '.thanks', isShow: true },
  { activeBtn: '.cancel', oppositeBtn: '.ok', content: '.thanks', isShow: false }
]

// 统一绑定事件，无重复逻辑
toggleConfig.forEach(item => {
  $(item.activeBtn).click(function() {
    $(this).addClass('inactive')
    $(item.oppositeBtn).removeClass('inactive')
    $(item.content).toggleClass('inactive', !item.isShow)
  })
})

方案2：全局通用可扩展（推荐） #

只需要给原有按钮加统一类名和自定义数据属性，后续新增任意多组切换交互，都不需要再写JS代码，纯写HTML即可实现相同效果。

调整后的HTML结构（样式完全不变） #

<style>
.inactive{
  display:none;
}
button{
  padding:5px 25px;
  color: #fff;
  background-color:#1d9bf0;
  margin-top: 10px;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 给切换按钮统一加toggle-btn类，通过data属性配置关联元素 -->
<button class="toggle-btn show" data-pair=".hide" data-target=".helloworld" data-show="true"> + Show </button>
<button class="toggle-btn hide inactive" data-pair=".show" data-target=".helloworld" data-show="false"> - Hide </button>
<p class="helloworld inactive">Hello WOrld</p>
<br>
<button class="toggle-btn ok" data-pair=".cancel" data-target=".thanks" data-show="true"> + Ok </button>
<button class="toggle-btn cancel inactive" data-pair=".ok" data-target=".thanks" data-show="false"> - Cancel </button>
<p class="thanks inactive">Thank you</p>

全局通用JS（只需要写一次） #

// 全局事件委托，一次绑定永久复用
$(document).on('click', '.toggle-btn', function() {
  const $btn = $(this)
  $btn.addClass('inactive')
  $($btn.data('pair')).removeClass('inactive')
  $($btn.data('target')).toggleClass('inactive', !$btn.data('show'))
})

效果说明 #

两种方案都和原有代码的交互逻辑完全一致：

• 点击当前按钮后自动隐藏自身
• 显示配对的另一个操作按钮
• 对应内容块按点击按钮的功能执行显示/隐藏
• 原有样式完全不需要改动

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