在JavaScript中实现元素切换状态并保存至localStorage

我最近在Web应用开发中尝试实现一个交互功能：通过按钮控制目标元素的显示/隐藏，当元素淡入显示时，按钮文本自动变更；当元素隐藏时，按钮文本再切换回初始状态。

我找到的JS Fiddle示例代码片段如下：

<div class="ISBody"> 
  <h5>Header</h5> 
  <div class="ISTopLink"><a href="#ISTop">Return to Top</div> 
  <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div> 
  <hr> 
  <div id="pos" style="display: ...">
    <!-- 目标元素内容 -->
  </div>
</div>

针对这个需求，我整理了一个完整的实现方案（和示例代码风格匹配，基于jQuery）：

完整代码实现 #

<div class="ISBody"> 
  <h5>Header</h5> 
  <div class="ISTopLink"><a href="#ISTop">Return to Top</a></div> 
  <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div> 
  <hr> 
  <div id="pos" style="display:block;">
    <!-- 这里是需要切换显示的产品内容 -->
    <p>产品1：XXXXX</p>
    <p>产品2：XXXXX</p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$('.hideLink').on('click', function(e) {
  // 阻止a标签默认的跳转行为，避免页面锚点跳转
  e.preventDefault();
  
  // 对目标元素执行淡入淡出切换动画，400为动画时长（毫秒）
  $('#pos').fadeToggle(400, function() {
    // 动画完成后，根据元素当前状态修改按钮文本
    if ($(this).is(':visible')) {
      $('.hideLink').text('Hide Products - ');
    } else {
      $('.hideLink').text('Show Products + ');
    }
  });
});
</script>

关键实现细节 #

• 使用fadeToggle()方法：jQuery内置的动画方法，能自动判断元素当前状态，执行淡入或淡出动画，无需手动写显示/隐藏逻辑
• 动画回调函数：确保按钮文本的切换在动画完成后执行，避免出现元素状态和文本不同步的问题
• 状态判断：通过is(':visible')检查目标元素的显示状态，动态匹配对应按钮文本
• 阻止默认行为：用e.preventDefault()避免点击a标签时触发不必要的页面跳转

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