如何用jQuery实现点击卡片内按钮切换内部div的hidden类及代码问题解决

问题分析 #

当前代码存在以下核心问题：

• 事件绑定逻辑错误：每次点击按钮时重复给所有.coin-card绑定点击事件，导致事件触发混乱，无法正常切换面板状态
• 类切换逻辑不可靠：通过判断class属性长度来判断隐藏状态，一旦面板有其他类就会失效
• 冗余遍历操作：showMoreInfo中遍历所有卡片找匹配项，完全没必要，直接操作当前点击的卡片即可

解决方案代码 #

修改后的HTML #

<div class="coin-card">
  <div class="headInfo">
    <p class="coin-symbol">btc</p>
    <div class="form-check form-switch">
      <input class="form-check-input" num1="0" type="checkbox" role="switch" onclick="addCoinsToArray()">
      <label class="form-check-label" for="flexSwitchCheckChecked"></label>
    </div>
  </div>
  <p class="coin-name">Bitcoin</p>
  <button class="btn btn-info mybtn" num="0">More Info</button>
  <div class="more-info-panel hidden" symbol="bitcoin">
    <img class="more-info-image" src="./src/img/bitcoin-g80ff29158_640.jpg">
    <p class="info-title">Coin Prices:</p>
    <p class="usd">USD: $30</p>
    <p class="eur">EUR: €30</p>
    <p class="ils">ILS: ₪30</p>
  </div>
</div>

修改后的JS代码 #

// 页面加载完成后一次性绑定事件，避免重复绑定
$(document).ready(function() {
  // 直接给按钮绑定点击事件
  $('.mybtn').on('click', async function(e) {
    e.stopImmediatePropagation();
    const $btn = $(this);
    const $card = $btn.closest('.coin-card');
    const coinID = $card.find('.coin-name').text().toLowerCase();
    
    // 获取硬币详情数据
    const data = await fetchMoreInfo(coinID);
    if (!data) return;

    // 先隐藏所有面板
    hideAllPanels();

    // 切换当前面板的显示状态
    const $panel = $card.find('.more-info-panel');
    if ($panel.hasClass('hidden')) {
      $panel.removeClass('hidden');
      // 更新面板数据
      updatePanelData($panel, data);
    }
  });
});

const hideAllPanels = () => {
  // 直接给所有面板添加hidden类，无需复杂判断
  $('.more-info-panel').addClass('hidden');
};

const updatePanelData = ($panel, data) => {
  $panel.find('.more-info-image').prop('src', data?.image?.large);
  $panel.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
  $panel.find('.eur').text(`EUR: €${data?.market_data?.current_price?.eur}`);
  $panel.find('.ils').text(`ILS: ₪${data?.market_data?.current_price?.ils}`);
};

关键修改说明 #

1. 事件绑定优化：在页面加载完成后一次性给所有按钮绑定点击事件，避免重复绑定导致的逻辑混乱
2. 类切换逻辑简化：使用jQuery的hasClass、addClass、removeClass直接操作类，替代原有的判断class长度的不可靠逻辑
3. 去掉冗余遍历：通过closest('.coin-card')直接获取当前按钮所在的卡片，无需遍历所有卡片找匹配项
4. 分离数据更新逻辑：把面板数据更新单独抽成updatePanelData函数，代码结构更清晰
5. 实现需求效果：每次点击按钮先隐藏所有面板，再根据当前面板状态决定是否显示，既满足打开新面板自动关闭旧面板的需求，也支持点击同一按钮关闭面板

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