jQuery Shorten插件按window.width()设置不同参数不生效怎么办？

问题原因 #

你使用的1.0版本Shorten插件不支持重复初始化更新配置：

• 首次调用.shorten()方法时，插件已经完成了原文本截断、插入“更多/收起”按钮的操作，同时会给目标元素添加已处理的标记
• 后续在移动端分支中第二次调用.shorten()时，插件检测到该元素已经处理过，直接跳过执行，新参数不会生效

这也是为什么同分支下的修改背景色、Select2初始化都能正常运行，只有Shorten插件不生效的核心原因。

解决方法 #

不要分两次调用Shorten初始化，先根据屏幕宽度判断得到对应配置，只初始化一次即可，修改后代码如下：

$(document).ready(function() {
    // 先定义桌面端默认配置
    const shortenConfig = {
        showChars : 500, 
        ellipsesText: "...", 
        moreText  : "Read More", 
        lessText : "Read Less"
    };
    // 移动端判断，覆盖配置
    if($(window).width() < 800){
        $(".comment").css('background-color', 'red');
        Object.assign(shortenConfig, {
            showChars : 100, 
            ellipsesText: "", 
            moreText : "More", 
            lessText  : "Less"
        });
        $("#MultipleSelect").select2({ width: '100%' });
    } else {
        $(".comment").css('background-color', 'blue');
    }
    // 仅调用一次shorten初始化
    $(".comment").shorten(shortenConfig);
});

如果需要支持窗口大小变化时动态适配，你可以提前把.comment的原始文本内容存起来，每次窗口尺寸变化时先恢复原始文本、清空插件生成的按钮元素，再用对应配置重新初始化即可。

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