jQuery按钮文本切换功能仅生效一次故障排查求助

故障根因 #

1. HTML实体匹配失败：你使用$('.ctext').html()的返回值与硬编码的包含HTML实体的字符串做全等判断，浏览器解析DOM后，.html()返回的是已渲染的实际内容，‹会被转为‹、›会被转为›，首次切换后文本内容已经和你写的判断字符串完全不匹配，后续判断永远走同一分支，自然不会再切换文本。
2. 选择器范围错误：全局使用.ctext选择器会选中所有绑定了该事件的按钮的文本节点，每次点击会同时修改所有按钮的文本，不符合单个按钮独立控制的预期。

修复方案 #

方案1：基于文本判断修复（最小改动） #

首先修改HTML中绑定的点击事件，传入当前点击元素：

<div class="button type2 btn-Name" onclick="selectDesc(this, '#card','#text', '#desc');">
  <div class="ctext">More <b>&rsaquo;</b></div>
</div>

然后修改JS逻辑，取当前按钮内的文本节点，用纯文本做匹配判断：

function selectDesc(btn, idToIgnore, text, desc) {
  // 仅选中当前点击按钮内的文本节点
  const $ctext = $(btn).find('.ctext');
  // 用纯文本做判断，规避HTML实体转义问题
  const currentText = $ctext.text().trim();
  $ctext.html(currentText === 'Less ‹' ? 'More <b>&rsaquo;</b>' : 'Less <b>&lsaquo;</b>');

  // 原有动画逻辑保留不变
  if ($(desc).is(':hidden')) {
    $('.profiles').not(idToIgnore).hide(1000, function() {
        $(desc).show(600, function() { $(text).fadeIn(200) });
    });
    return
  } else if ($(desc).is(':visible')) {
    $(text).fadeToggle(200, function() { $(desc).toggle(600, function() { $('.profiles').not(idToIgnore).toggle(1000) }) })
    return
  }
}

方案2：状态类实现（更稳定，推荐） #

无需依赖文本内容做判断，通过给按钮添加状态类控制逻辑，后续修改按钮文本也不会影响功能：

function selectDesc(btn, idToIgnore, text, desc) {
  const $btn = $(btn);
  const $ctext = $btn.find('.ctext');
  // 切换展开状态类
  $btn.toggleClass('is-open');
  // 根据状态类直接设置对应文本
  $ctext.html($btn.hasClass('is-open') ? 'Less <b>&lsaquo;</b>' : 'More <b>&rsaquo;</b>');

  // 原有动画逻辑保留不变
  if ($(desc).is(':hidden')) {
    $('.profiles').not(idToIgnore).hide(1000, function() {
        $(desc).show(600, function() { $(text).fadeIn(200) });
    });
    return
  } else if ($(desc).is(':visible')) {
    $(text).fadeToggle(200, function() { $(desc).toggle(600, function() { $('.profiles').not(idToIgnore).toggle(1000) }) })
    return
  }
}

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