javascript – jQuery-Plug-in zum Abfangen der Zeichenfolgenlänge, stößt auf das Problem, dass text() im Element nicht korrekt abgerufen werden kann

Question

Ich habe ein Plug-in erstellt, das die Länge einer Zeichenfolge abfängt. Wenn die Anzahl der Zeichen die angegebene Anzahl überschreitet, werden die Zeichen abgefangen und der vollständige Inhalt wird angezeigt, indem der Maus gefolgt wird.
Dies kann beim alleinigen Schreiben der Funktion realisiert werden. Nach Verwendung der folgenden Methode zum Erstellen eines Plug-Ins wird jedoch festgestellt, dass der Inhalt, dem die Maus folgt, der letzte ist und der Inhalt des letzten Inhalts unabhängig davon angezeigt wird davon, ob die Zeichen überschritten werden, denn wenn ein Teil des Inhalts vorhanden ist Es wird dynamisch geladen, sodass die Ereignisdelegierung verwendet wird.

(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 算局部的还是全局的？据说某些比较老的浏览器会认为是全局的。这样的话，鼠标跟随内容都是最后一条就可以解释了。目前从代码来看我还看不出来其它可能造成这一现象的问题。