多元素场景下jQuery记忆卡切换功能异常排查求助

问题描述 #

我是jQuery和JavaScript新手，做了一个语言学习记忆卡项目，目前能不刷新页面创建临时卡片，删除功能正常，但切换（toggle）功能无法正常工作，请求帮忙排查。

问题根源 #

1. 删除后切换事件丢失：reloadData函数在删除卡片重新渲染后，仅重新绑定了删除按钮的事件，完全遗漏了切换按钮的事件绑定，导致剩余卡片的切换功能失效。
2. 重复绑定与索引匹配错误：每次创建新卡片时，都对所有已存在的按钮重复绑定事件，会引发点击一次触发多次操作的问题；同时通过循环索引i关联元素的方式，在DOM动态变化后，索引与实际元素的对应关系会错乱。
3. DOM操作逻辑冗余：手动循环添加元素、绑定事件的方式繁琐且易出错，没有利用jQuery特性简化操作。

修复后的代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <title>Memory cards</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <style>
    /* 抽离内联样式，便于维护 */
    .card {
      float: left;
      width: 100%;
      height: 35px;
      margin: 5px 0;
    }
    .words {
      float: left;
      width: 70%;
    }
    .words p {
      float: left;
      margin: 0;
    }
    .card .actions {
      float: left;
      width: 30%;
    }
    .toggle, .delete {
      margin-right: 15px;
      cursor: pointer;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Crea le tue memory card</h1>
  <form>
    <input type="text" id="txt1" name="txt1" placeholder="originale" />
    <input type="text" id="txt2" name="txt2" placeholder="traduzione" /><!-- 修正拼写错误plaecholder -->
    <input id="createCard" type="button" value="Crea" />
    <input type="reset" value="Cancella" />
  </form>
  <div id="content">
    <!-- inserisci le tue memory cards temporanee qua -->
  </div>
</body>
</html>

JavaScript部分 #

// 事件委托处理动态元素点击，一次绑定永久生效
$("#content").on("click", ".toggle", function() {
  // 定位当前按钮所属卡片及目标元素
  const $card = $(this).closest(".card");
  const $original = $card.find(".original");
  const $translation = $card.find(".translation");
  
  // 切换显示状态
  if ($original.is(":visible")) {
    $original.hide();
    $translation.show();
  } else {
    $original.show();
    $translation.hide();
  }
});

$("#content").on("click", ".delete", function() {
  // 删除当前按钮所属卡片
  $(this).closest(".card").remove();
});

$("#createCard").click(function() {
  const originalText = $("#txt1").val().trim();
  const translationText = $("#txt2").val().trim();
  
  // 简单校验输入合法性
  if (!originalText || !translationText) return;
  
  // 用模板字符串拼接卡片HTML，可读性更强
  const cardHtml = `
    <div class="card">
      <div class="words">
        <p class="original">${originalText}</p>
        <p class="translation" style="display: none;">${translationText}</p>
      </div>
      <div class="actions">
        <span class="toggle">ruota</span>
        <span class="delete">elimina</span>
      </div>
    </div>
  `;
  
  $("#content").append(cardHtml);
  
  // 创建完成后清空输入框
  $("#txt1").val("");
  $("#txt2").val("");
});

优化说明 #

• 事件委托：通过父元素#content监听子元素点击，无论卡片新增还是删除，事件自动生效，无需重复绑定。
• 元素定位优化：用closest(".card")快速定位当前按钮所属卡片，再通过find()匹配目标元素，彻底避免索引匹配错误。
• 代码简化：删除冗余的reloadData函数，删除卡片直接调用remove()，创建卡片用模板字符串提升可读性。
• 细节修复：修正HTML中的拼写错误，抽离内联样式到<style>标签，提升代码可维护性。

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