javascript - jQuery截取字串長度的插件，遇到無法正確取得元素內text()的問題

Question

做了個截取字串長度的插件，當字符超過指定個數後截取字符，並滑鼠跟隨顯示完整的內容提示。
單獨寫功能的時候是可以實現的，但用下面的方式做成插件後，發現滑鼠跟隨的內容都是最後一條的，而且不管字元有沒有超過都會顯示最後一條的內容，因為有部分內容時動態載入的，所以用了事件委託的方式。

(function($, window, document, undefined) {
    // 创造一个公共变量来构建一个私有方法
    var privateFunction = function() {}
    var methods = {
        // 字符截取，鼠标触发跟随详情提示框
        subString: function (options) {
            return this.each(function(index) {
                var $this = $(this);
                var defaults = {
                    el: '',      // 目标元素
                    charNum: 22,    // 截取字符个数
                    hasDot: true,   // 是否显示省略号
                    // dotColor: '#666'   // 省略号颜色
                    allTextp: '#allText',       // 鼠标跟随完整文本框的p
                    isPrompt: true      // 是否显示提示框
                };
                var settings = $.extend({}, defaults, options),
                    allTextp = settings.allTextp.replace(/[#|.]/g, ''),
                    strText = $(settings.el).eq(index).text(),
                    chineseRegex = /[^\x00-\xff]/g,
                    strLength = strText.replace(chineseRegex, '**').length,
                    newLength = 0,
                    newStr = '',
                    singleChar = '';
                function _subString(str, len, hasDot) {
                    for (var i = 0; i < strLength; i++) {
                        singleChar = str.charAt(i).toString();
                        singleChar.match(chineseRegex) != null ? newLength += 2 : newLength++;
                        if (newLength > len) break;
                        newStr += singleChar;
                    }
                    if (hasDot && strLength > len) newStr += '...';
                    return newStr;
                }
                // 截取字符串
                $this.html(_subString(strText, settings.charNum, settings.hasDot));
                // 鼠标跟随是否显示完整文本框
                if ( (strLength > settings.charNum) && settings.isPrompt ) {
                    $(document).on('mouseover', settings.el, function(event) {
                        if ( settings.allTextp.indexOf('#') != -1 ) $('body').append('<p id="' + allTextp + '" />');
                        if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('<p class="' + allTextp + '" />');
                    });
                    $(document).on('mousemove', settings.el, function(event) {
                        $(settings.allTextp).text(strText).show().css({
                            left: event.pageX + 30,
                            top: event.pageY
                        });
                    });
                    $(document).on('mouseout', settings.el, function(event) {
                        $(settings.allTextp).remove();
                    });
                    // $this.mouseover(function() {
                    //     if ( settings.allTextp.indexOf('#') != -1 ) $('body').append('<p id="' + allTextp + '" />');
                    //     if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('<p class="' + allTextp + '" />');
                    // });
                    // $this.mousemove(function(event) {
                    //     $(settings.allTextp).text(strText).show().css({
                    //         left: event.pageX + 30,
                    //         top: event.pageY
                    //     });
                    // });
                    // $this.mouseout(function() {
                    //     $(settings.allTextp).remove();
                    // });
                }
            });
        }
        };
    $.fn.inCommonUseJsPlugin = function() {
        var method = arguments[0];
        if(methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else/* if( typeof(method) == 'object' || !method ) {
            method = methods.init;
        } else */{
            $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
            return this;
        }
        return method.apply(this, arguments);
    }
})(jQuery, window, document);

Answer 1

上班時間腦子漿糊了，回家重新寫了一遍，已經解決了，換個思路問題就簡單很多了！

/**
 * 
 * @authors xxy
 * @date    2017-06-26 19:19:42
 * @url http://www.hifrontend.com
 */

(function($, window, document, undefined) {
    var methods = {
        // 字符截取，鼠标触发跟随详情提示框
        subString: function (options) {
            var $this = $(this);
            var defaults = {
                el: 'li',      // 目标元素
                charNum: 22,    // 截取字符个数
                hasDot: true,   // 是否显示省略号
                // dotColor: '#666'   // 省略号颜色
                allTextp: '#allText',       // 鼠标跟随完整文本框的p
                isPrompt: true      // 是否显示提示框
            };
            var settings = $.extend({}, defaults, options);
            function _subString(str, len, hasDot) {
                var newLength = 0;
                var newStr = "";
                var chineseRegex = /[^\x00-\xff]/g; // 提取中文汉字
                var singleChar = "";
                var strLength = str.replace(chineseRegex, "**").length; // 将中文替换成 ** 并计算长度
                for (var i = 0; i < strLength; i++) {
                    singleChar = str.charAt(i).toString();
                    (singleChar.match(chineseRegex) != null) ? newLength += 2 : newLength++;
                    if (newLength > len) break;
                    newStr += singleChar;
                }
                if (hasDot && strLength > len) newStr += "...";
                return newStr;
            }
            $(settings.el).each(function() {
                var text = $(this).text();
                $(this).attr('data-text', text); 
                $(this).html(_subString(text, settings.charNum, settings.isPrompt));
            });
            // 鼠标跟随是否显示完整文本框
            $(document).on('mouseover', settings.el, function() {
                var allTextLen = $(this).attr('data-text').replace(/[^\x00-\xff]/g, "**").length;
                if ( allTextLen > settings.charNum ) {
                    var allTextp = settings.allTextp.replace(/[#|.]/g, '')
                    if ( settings.allTextp.indexOf('#') != -1 ) $('body').append('<p id="' + allTextp + '" />');
                    if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('<p class="' + allTextp + '" />');
                }
            });
            $(document).on('mousemove', settings.el, function(event) {
                $(settings.allTextp).text( $(this).attr('data-text') ).show().css({
                    left: event.pageX + 30,
                    top: event.pageY
                });
            });
            $(document).on('mouseout', settings.el, function() {
                $(settings.allTextp).remove()
            });
            return this;
        }
    };
    $.fn.inCommonUseJsPlugin = function() {
        var method = arguments[0];
        if(methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
            return this;
        }
        return method.apply(this, arguments);
    }
})(jQuery, window, document);

Answer 2

var settings = $.extend({}, defaults, options),
    allTextp = settings.allTextp.replace(/[#|.]/g, ''),
    strText = $(settings.el).eq(index).text(),
    chineseRegex = /[^\x00-\xff]/g,
    strLength = strText.replace(chineseRegex, '**').length,
    newLength = 0,
    newStr = '',
    singleChar = '';

像這種寫法，allTextp 算局部的還是全局的？據說某些比較老的瀏覽器會認為是全域的。這樣的話，滑鼠跟隨內容都是最後一條就可以解釋了。目前從程式碼來看我還看不出來其它可能造成這現象的問題。