多行列场景下jQuery show/hide功能运行异常该如何修复

API 探路者

2026-10-9

问题根源

代码中使用了全局唯一的固定ID divData、divDataData，多行列场景下所有行共用相同ID，违反HTML ID唯一规范，jQuery选择器只会匹配到第一个符合条件的元素，导致操作错位。
点击新行按钮时没有重置上一行的按钮状态和内容显示状态，导致多个按钮同时显示Hide文本，内容区域只展示最后一次点击的数据。

修复方案

第一步：调整HTML结构

把固定ID改为类名，保证每个按钮和对应的数据区域为相邻同级元素，方便通过DOM关系匹配：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 每一行的结构 多行直接重复下面这段即可 -->
<a href="javascript:;" class="showDiv" data-id="#audioID#">Show Daily +/-</a>
<div class="row divData" style="display:none;">
  <div class="col-md-12">
    <div class="card-box">
      <div class="divDataData"></div>
    </div>
  </div>
</div>

第二步：调整JS逻辑

点击按钮时先重置所有其他行的状态，再操作当前点击行的对应元素：

$(document).on('click', '.showDiv', function() {
  // 先重置所有其他行的状态
  $('.showDiv').not(this).text('Show Daily +/-').removeClass('removeDiv');
  $('.divData').not($(this).next()).hide();

  // 操作当前行元素
  const $currentData = $(this).next('.divData');
  const $currentDataContent = $currentData.find('.divDataData');
  $currentData.show();
  $currentDataContent.load('audioDailyCounts.cfm?audioID=' + $(this).attr('data-id') + '&_new=' + Math.random());
  $(this).text('Hide Daily +/-');
  $(this).addClass('removeDiv');
});

$(document).on('click', '.removeDiv', function(e) {
  // 阻止事件冒泡到上层的showDiv点击事件
  e.stopPropagation();
  const $currentData = $(this).next('.divData');
  $currentData.hide();
  $(this).text('Show Daily +/-');
  $(this).removeClass('removeDiv');
});