合并JavaScript/jQuery函数遇问题：点击激活<li>与字符截取冲突排查

嘿，我来帮你搞定这个问题！其实核心冲突点很明确：你的文本截取代码修改了<li>的内容，导致原来用来识别「自定义金额」选项的逻辑（大概率是依赖文本内容判断）失效了。下面一步步给你拆解修复方案：

问题根源分析 #

你单独运行两段代码都正常，但一起用就出问题，原因在于：

1. 文本截取代码会覆盖掉<li>的原始文本，如果你的「显示隐藏输入框」逻辑是通过判断<li>的文本内容（比如if ($(this).text() === '自定义金额')）来触发的，那文本被修改后这个判断就不成立了。
2. 虽然active类是绑定在元素本身上不受文本影响，但输入框的显示逻辑失去了触发依据，自然就没反应了。

修复步骤 #

1. 给「自定义金额」选项加专属标识 #

不要依赖文本内容识别选项，直接给它加一个专属类，这样不管文本怎么改都能精准定位：

<!-- 修改你的HTML代码，给最后一个li加类 -->
<ul class="donate-options">
  <li>5欧元</li>
  <li>10欧元</li>
  <li>15欧元</li>
  <li class="custom-amount-option">自定义金额</li>
</ul>
<!-- 隐藏的输入框（假设你原来的结构是这样） -->
<input type="number" class="custom-donate-input" style="display: none;" placeholder="输入自定义金额">

2. 优化合并你的jQuery代码 #

把文本截取和点击事件逻辑整合，避免重复DOM操作，同时用类来判断自定义金额选项：

$(function() {
  // 第一步：处理文本截取（合并你原来的两段截取逻辑，减少DOM操作）
  $('.donate-box ul li').text(function(i, originalText) {
    // 按你的需求先截取后72位，再从第99位开始取（注意：如果处理后文本为空，可能需要调整参数）
    let processedText = originalText.slice(0, -72);
    processedText = processedText.substr(99);
    return processedText;
  });

  // 第二步：绑定点击事件，处理active类和输入框显示
  $(".donate-box ul li").click(function() {
    const $currentLi = $(this);
    // 移除所有li的active类
    $(".donate-box ul li.active").removeClass("active");
    // 给当前li添加active类
    $currentLi.addClass("active");

    // 通过专属类判断是否是自定义金额选项，触发输入框显示/隐藏
    if ($currentLi.hasClass("custom-amount-option")) {
      $(".custom-donate-input").show();
    } else {
      $(".custom-donate-input").hide();
    }
  });
});

额外优化建议 #

• 把$(function() { ... })包裹所有代码，确保DOM加载完成后再执行，避免元素未加载导致的绑定失败。
• 如果你的文本截取参数（slice(0,-72)、substr(99)）是为了去除WordPress自动生成的冗余内容，可以考虑直接在编辑器里清理文本，减少前端处理的麻烦。

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