求助：如何实现长链接截断+hover显示完整链接？附错误函数

嘿，我看了你的代码，发现几个小细节导致它没法正常工作，咱们一步步来修正：

你的代码存在的问题 #

• substring() 方法不会修改原字符串，得把返回的结果重新赋值给变量才行
• append() 是jQuery操作DOM元素的方法，不能直接用在普通字符串上，应该用字符串拼接来加"..."
• 处理完文本后，没把截断后的内容放回链接元素里
• 漏掉了设置title属性的步骤，这可是实现鼠标悬停显示完整内容的关键

修正后的完整实现 #

下面是能正常运行的代码，我加了注释帮你理解每一步：

function shortenLink() {
  // 遍历所有div下的a标签，确保每个链接都能被处理
  $("div a").each(function() {
    // 获取当前链接的完整文本内容
    const fullText = $(this).text();
    // 设置title属性，鼠标悬停时就会显示完整文本啦
    $(this).attr("title", fullText);
    
    // 判断文本长度是否超过30个字符
    if (fullText.length > 30) {
      // 截断前30个字符，再拼接"..."
      const truncatedText = fullText.substring(0, 30) + "...";
      // 把截断后的文本替换回链接里
      $(this).text(truncatedText);
    }
  });
}

// 要等DOM加载完成后再执行函数，不然可能找不到链接元素
$(document).ready(function() {
  shortenLink();
});

额外提醒 #

• 如果你的链接是动态加载的（比如通过AJAX异步获取），记得在新内容加载完成后再调用一次shortenLink()函数
• 用title属性实现悬停显示是浏览器原生支持的效果，和亚马逊的实现逻辑完全一致，不用额外写复杂的悬浮层

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