javascript - Le plug-in jQuery pour intercepter la longueur de la chaîne rencontre le problème de ne pas pouvoir obtenir correctement le text() dans l'élément

Question

J'ai créé un plug-in qui intercepte la longueur d'une chaîne lorsque le nombre de caractères dépasse le nombre spécifié, il intercepte les caractères et affiche l'invite de contenu complète en suivant la souris. Cela peut être réalisé en écrivant la fonction seule, mais après avoir utilisé la méthode suivante pour créer un plug-in, j'ai trouvé que le contenu suivi par la souris est le dernier, et qu'il y ait ou non des caractères...

世界只因有你 · Answer

Mon cerveau était confus pendant les heures de travail. Je suis rentré chez moi et je l'ai réécrit. Ce serait beaucoup plus facile si je changeais de façon de penser.

/**
 * 
 * @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('');
                    if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('');
                }
            });
            $(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);

phpcn_u1582 · Answer

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 = '';

Lorsqu'il est écrit ainsi, allTextp est considéré comme local ou global ? On dit que certains navigateurs plus anciens le considéreront comme global. Dans ce cas, on peut expliquer que le contenu suivi par la souris est toujours le dernier. Du point de vue du code, je ne vois aucun autre problème pouvant provoquer ce phénomène.