如何将原生JavaScript代码转为jQuery代码？转换遇阻求协助

下面是你提供的原生JS代码对应的jQuery版本，功能完全一致且更简洁：

$(document).ready(function() {
  $(".nk-sec-icon").on("click", function() {
    const targetId = $(this).data("content");
    $(".nk-sec-content").removeClass("show");
    $("#" + targetId).addClass("show");
  });
});

代码说明： #

• $(document).ready()：确保DOM加载完成后再执行脚本，避免找不到元素的问题
• $(".nk-sec-icon").on("click", ...)：批量给所有图标绑定点击事件，替代原生的querySelectorAll+forEach+addEventListener
• $(this).data("content")：快速获取当前点击元素的data-content属性值，对应原生的e.currentTarget.dataset.content
• $(".nk-sec-content").removeClass("show")：一次性移除所有内容区块的show类，jQuery会自动遍历处理，无需手动循环
• $("#" + targetId).addClass("show")：给目标内容区块添加show类，实现显示效果

完整可运行代码： #

<!DOCTYPE html>
<html>
<head>
  <!-- 请先引入jQuery库，可从官方下载后本地引入 -->
  <style>
    .nk-sec-content {
      height: 100%;
      display: none;
    }

    .nk-sec-content.show {
      display: block;
    }

    .nk-sec-icon {
      width: 30px;
      height: 30px;
      background: yellow;
      cursor: pointer; /* 添加鼠标指针提示可点击 */
    }

    .nk-sec-icon-l {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="nk-sec-container-settings">
    <div class="nk-sec-icon-l">
      <div class="nk-sec-icon _changepassword" data-content="changepassword" data-title="Change Password"></div>
      <div class="nk-sec-icon _emailaddress" data-content="emailaddress" data-title="Email Address"></div>
      <div class="nk-sec-icon _contactnumber" data-content="contactnumber" data-title="Contact Number"></div>
      <div class="nk-sec-icon _company" data-content="company" data-title="Company"></div>
      <div class="nk-sec-icon _help" data-content="help" data-title="Help"></div>
    </div>
    <div class="nk-sec-settings-content">
      <div class="nk-sec-content show" id="changepassword">
        <div class="nk--sec-container">
          <div class="nk-sec-input">
            <div class="nk-cp-text">Username</div>
            <input type="text" id="username" name="username" value="001637" disabled="">
          </div>
          <div class="nk-sec-input">
            <div class="nk-cp-text">Account name</div>
            <input type="text" id="accountname" name="accountname" value="" disabled="">
          </div>
          <div class="nk-sec-input">
            <div class="nk-cp-text">Old password</div>
            <input type="text" id="oldpassword" name="oldpassword">
          </div>
          <div class="nk-sec-input">
            <div class="nk-cp-text">New password</div>
            <input type="text" id="newpassword" name="newpassword">
          </div>
          <div class="nk-sec-input">
            <div class="nk-cp-text">Confirm password</div>
            <input type="text" id="confirmpassword" name="confirmpassword">
          </div>
          <div class="nk-sec-input">
            <div class="nk-btn-cpassword">Update password</div>
          </div>
        </div>
      </div>
      <div class="nk-sec-content" id="emailaddress">
        <div class="nk--sec-container">
          <div class="nk-sec-input">
            <div class="nk-cp-text">Email</div>
            <input type="text" id="email" name="email" value="" disabled="">
          </div>
          <div class="nk-sec-input">
            <input type="text" id="email" name="email" value="">
          </div>
          <div class="nk-sec-input">
            <div class="nk-btn-cpassword">Add more email</div>
          </div>
        </div>
      </div>
      <div class="nk-sec-content" id="contactnumber">
        <div class="nk-sec-content-title">Contact number</div>
      </div>
      <div class="nk-sec-content" id="company">
        <div class="nk-sec-content-title">Company</div>
      </div>
      <div class="nk-sec-content" id="help">
        <div class="nk-sec-content-title">Help</div>
      </div>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $(".nk-sec-icon").on("click", function() {
        const targetId = $(this).data("content");
        $(".nk-sec-content").removeClass("show");
        $("#" + targetId).addClass("show");
      });
    });
  </script>
</body>
</html>

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