DataList点击异常：无法获取对应行产品ID问题求助

问题原因 #

1. DataList渲染后会生成多个重复ID的元素（如原代码中的I3、heden4），浏览器要求ID唯一，导致JS只能获取到第一个匹配元素。
2. 原点击事件myFunctio3()未关联当前点击的卡片上下文，无法定位到对应行的产品ID。

修改后的解决方案 #

1. 调整DataList项模板代码 #

替换原静态ID为类名，确保每个项的元素可被精准定位：

<div class="col-xl-3 col-md-6 mb-4" style="width:auto">
  <div class="card border-left-info shadow h-100 py-2 product-card">
    <div class="card-body">
      <div class="row no-gutters align-items-center">
        <div class="col mr-2">
          <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
            <asp:Label ID="Label4" runat="server" Text='<%# Eval("NameKala") %>' />
          </div>
          <div class="row no-gutters align-items-center">
            <div class="col-auto">
              <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                <asp:Label ID="Label3" runat="server" Text='<%# Eval("IdKala") %>' CssClass="product-id" /> 
              </div>
            </div>
            <div class="col">
              <div class="progress progress-sm mr-2">
                <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info" role="progressbar" style="width: 50%">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-auto">
          <h4 onclick="showProductId(this)">
            <i class="fa fa-chevron-up" aria-hidden="true"></i> &nbsp; open
          </h4>
          <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
        </div>
      </div>
      <div class="hidden-content" style="display:none"> 
        <p> test
          <asp:Label ID="Label5" runat="server" Text='<%# Eval("IdKala") %>' /> 
        </p>
      </div>
    </div>
  </div>
</div>

2. 对应的JavaScript代码 #

通过点击元素的上下文，精准定位当前行的产品ID：

function showProductId(clickedElement) {
  // 找到当前点击元素所属的卡片容器
  const currentCard = clickedElement.closest('.product-card');
  // 获取当前卡片内的产品ID
  const productId = currentCard.querySelector('.product-id').textContent;
  // 获取当前卡片的隐藏内容区域
  const hiddenArea = currentCard.querySelector('.hidden-content');

  // 切换隐藏区域显示状态，并输出产品ID
  hiddenArea.style.display = hiddenArea.style.display === 'none' ? 'block' : 'none';
  console.log('当前产品ID:', productId);
  // 可根据需求修改为弹窗显示或其他业务逻辑
}

关键修改说明 #

• 用类名替代重复静态ID：product-card标记整个卡片容器，product-id标记产品ID元素，hidden-content标记隐藏区域，避免ID冲突。
• 点击事件传递this参数：将当前点击的元素传入函数，确保JS能定位到对应的卡片行。
• 使用DOM关系定位：通过closest()和querySelector()方法，基于当前点击元素找到目标内容，保证操作的是当前行的元素。

额外优化 #

如果需要点击卡片任意区域都触发功能，可将点击事件绑定到.product-card容器：

<div class="card border-left-info shadow h-100 py-2 product-card" onclick="showProductId(this)">

内容的提问来源于stack exchange，提问作者میلاد صیادی