如何使用jQuery及data()方法实现按钮的显示与隐藏？

嘿，我明白你要做的是针对特定ID的容器，切换里面activate和deactivate按钮的显示状态对吧？用jQuery来实现这个其实挺顺手的，我给你两种方案参考下~

如果只是需要操作某一组特定ID的按钮（比如你例子里的activate001003和deactivate001003），可以直接通过ID绑定点击事件，利用ID的命名规律来快速定位对应的按钮：

<!-- 补全后的参考HTML结构 -->
<div id="targetContainer001003">
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">激活B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">停用B2</button>
</div>

// 绑定激活按钮的点击事件
$('#activate001003').on('click', function() {
  // 隐藏当前点击的激活按钮
  $(this).hide();
  // 把ID里的"activate"替换成"deactivate"，找到对应的停用按钮并显示
  $('#' + this.id.replace('activate', 'deactivate')).show();
  
  // 如果需要用到data-reference做额外逻辑（比如关联其他元素）
  var targetRef = $(this).data('reference');
  console.log('当前激活的标识是:', targetRef);
});

// 绑定停用按钮的点击事件
$('#deactivate001003').on('click', function() {
  $(this).hide();
  $('#' + this.id.replace('deactivate', 'activate')).show();
  
  var targetRef = $(this).data('reference');
  console.log('当前停用的标识是:', targetRef);
});

如果页面里有很多重复的div容器，一个个写ID绑定太麻烦，推荐用事件委托结合父容器/兄弟元素来批量处理，这样即使后续动态添加的容器也能生效：

<!-- 多个重复结构的容器示例 -->
<div class="buttonGroup" id="group001003">
  <button id="activate001003" class="jq_activate" data-reference="B1" type="button">激活B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">停用B2</button>
</div>
<div class="buttonGroup" id="group001004">
  <button id="activate001004" class="jq_activate" data-reference="B1" type="button">激活B1</button>
  <button id="deactivate001004" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">停用B2</button>
</div>

// 用事件委托绑定所有激活按钮
$(document).on('click', '.jq_activate', function() {
  var $currentBtn = $(this);
  // 隐藏当前按钮，同时显示同一个容器里的停用按钮
  $currentBtn.hide().siblings('.jq_deactivate').show();
  
  // 利用data-reference做自定义业务逻辑
  var ref = $currentBtn.data('reference');
  // 这里可以加你需要的额外操作，比如根据ref定位关联元素
});

// 同理绑定所有停用按钮
$(document).on('click', '.jq_deactivate', function() {
  var $currentBtn = $(this);
  $currentBtn.hide().siblings('.jq_activate').show();
  
  var ref = $currentBtn.data('reference');
  // 业务逻辑扩展...
});

• 把内联的style="display: none/inline"换成CSS类，代码更整洁易维护：

  .hidden { display: none; }
  .visible { display: inline; }
  

  然后HTML里直接加类：<button class="jq_deactivate hidden" ...>
• 如果按钮的data-reference是用来关联其他业务元素的，可以直接用这个值来定位，比如$('[data-reference="' + ref + '"]')，灵活度更高。

内容的提问来源于stack exchange，提问作者H. Ferrence