JQuery显示/隐藏问题：选中新项时如何移除之前的文本？

问题描述 #

实现了hover功能：鼠标悬停按钮时显示对应文本，点击按钮后文本保持显示。但点击新按钮时，之前选中的文本依然保留，需求是仅显示当前选中项的对应文本。

修改后的代码 #

JavaScript 部分

$(document).ready(function() {
  $('.btn').hover(function() {
    const id = $(this).attr('data-id');
    // 隐藏所有文本，显示当前hover的目标文本
    $('.b-text').hide();
    $('.b-' + id + '-text').show();
  }, function() {
    // 鼠标离开时，检查是否有选中的文本
    const selectedText = $('.b-text.selected');
    if (selectedText.length) {
      // 有选中项时，仅显示选中的文本
      $('.b-text').hide();
      selectedText.show();
    } else {
      // 无选中项则全部隐藏
      $('.b-text').hide();
    }
  }).on('click', function() {
    const id = $(this).attr('data-id');
    const targetText = $('.b-' + id + '-text');
    
    // 先移除所有文本的选中状态
    $('.b-text').removeClass('selected');
    
    // 切换当前文本的选中状态
    targetText.toggleClass('selected');
    
    // 确保仅显示当前操作的文本
    $('.b-text').hide();
    targetText.show();
  });
});

CSS 部分（无需修改）

.col-xs-5ths {
  width: 20%;
  float: left;
}

.b-text {
  display: none;
}

.selected {
  display: block!important;
}

HTML 部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid text-center">
  <div class="row">
    <h1>Title</h1>
  </div>
  <div class="row">
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-primary btn-circle btn-1" data-id="1"></button>
    </div>
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-info btn-circle btn-2" data-id="2"></button>
    </div>
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-success btn-circle btn-3" data-id="3"></button>
    </div>
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-warning btn-circle btn-4" data-id="4"></button>
    </div>
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-danger btn-circle btn-5" data-id="5"></button>
    </div>
  </div>
  <div class="row btn-text">
    <div class="b-1-text b-text">
      <h3>Button 1 Text</h3>
    </div>
    <div class="b-2-text b-text">
      <h3>Button 2 Text</h3>
    </div>
    <div class="b-3-text b-text">
      <h3>Button 3 Text</h3>
    </div>
    <div class="b-4-text b-text">
      <h3>Button 4 Text</h3>
    </div>
    <div class="b-5-text b-text">
      <h3>Button 5 Text</h3>
    </div>
  </div>
</div>

关键改动说明 #

1. 点击事件逻辑优化：点击按钮时先移除所有文本的selected类，再切换当前文本的选中状态，同时强制仅显示当前操作的文本，彻底避免多文本同时显示的问题。
2. hover离开逻辑调整：鼠标离开按钮时，不再直接隐藏所有文本，而是判断是否存在选中项——有选中项则仅保留显示该文本，无选中项才全部隐藏，保证选中状态不会被hover事件意外清除。

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