使用jQuery实现页面resize时修改指定链接文本的方法问询

嘿，我懂你想要一个更省心的方式来修改这个特定链接的文本，尤其是在页面尺寸变化的时候。你之前用contents().filter()过滤文本节点的方法确实有点繁琐，这里有几个更直接的优化方案：

方案1：简化jQuery文本节点操作（无需修改HTML） #

既然你的链接结构是固定的——<i>图标后面跟着文本节点，那我们可以直接定位到最后一个子节点（也就是目标文本），不用过滤所有节点：

// 获取目标链接并替换文本内容
$('a.roll-button[href="uniqueLinkInfo"]').contents().last().replaceWith('你的新文本!');

如果要结合页面尺寸调整，把逻辑放在resize事件里就行：

$(window).on('resize', function() {
  const $targetLink = $('a.roll-button[href="uniqueLinkInfo"]');
  // 根据窗口尺寸切换文本
  if ($(window).width() < 768) {
    $targetLink.contents().last().replaceWith('Call Us!');
  } else {
    $targetLink.contents().last().replaceWith('Call Now!');
  }
});
// 页面加载时触发一次，确保初始状态正确
$(window).trigger('resize');

方案2：给文本包裹<span>（长期维护更友好） #

如果可以修改HTML的话，给文本加个专属的<span>标签，后续修改会超级简单，完全不用处理文本节点：
修改后的HTML：

<a href="uniqueLinkInfo" class="roll-button button-slider"> 
  <i class="fa fa-phone"></i> 
  <span class="link-text">Call Now!</span>
</a>

对应的JS代码（响应式场景）：

$(window).on('resize', function() {
  const $textSpan = $('a.roll-button[href="uniqueLinkInfo"] .link-text');
  $textSpan.text($(window).width() < 768 ? 'Call Us!' : 'Call Now!');
});
$(window).trigger('resize');

这个方案的好处是结构清晰，哪怕以后链接里加了其他元素，只要<span class="link-text">存在，就能精准修改文本。

方案3：纯JavaScript方案（不用jQuery） #

如果你的项目不想依赖jQuery，用原生JS也能轻松实现：

const targetLink = document.querySelector('a.roll-button[href="uniqueLinkInfo"]');
// 监听窗口 resize 事件
window.addEventListener('resize', function() {
  // 找到文本节点（这里是链接的第二个子节点，第一个是<i>）
  const textNode = targetLink.childNodes[1];
  textNode.textContent = window.innerWidth < 768 ? 'Call Us!' : 'Call Now!';
});
// 初始化执行
window.dispatchEvent(new Event('resize'));

这些方案都比你之前的过滤方式更简洁，而且逻辑更直观，选最适合你项目场景的就行～

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