javascript - jQuery截取字符串长度的插件，遇到不能正确获取元素内text()的问题

问题描述

问 题

做了个截取字符串长度的插件，当字符超过指定个数后截取字符，并鼠标跟随显示完整的内容提示。
单独写功能的时候是可以实现的，但用下面的方式做成插件后，发现鼠标跟随的内容都是最后一条的，而且不管字符有没有超过都会显示最后一条的内容，因为有部分内容时动态加载的，所以用了事件委托的方式。

(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'   // 省略号颜色
                    allTextDiv: '#allText',       // 鼠标跟随完整文本框的DIV
                    isPrompt: true      // 是否显示提示框
                };
                var settings = $.extend({}, defaults, options),
                    allTextDiv = settings.allTextDiv.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.allTextDiv.indexOf('#') != -1 ) $('body').append('<div id="' + allTextDiv + '" />');
                        if ( settings.allTextDiv.indexOf('.') != -1 ) $('body').append('<div class="' + allTextDiv + '" />');
                    });
                    $(document).on('mousemove', settings.el, function(event) {
                        $(settings.allTextDiv).text(strText).show().css({
                            left: event.pageX + 30,
                            top: event.pageY
                        });
                    });
                    $(document).on('mouseout', settings.el, function(event) {
                        $(settings.allTextDiv).remove();
                    });
                    // $this.mouseover(function() {
                    //     if ( settings.allTextDiv.indexOf('#') != -1 ) $('body').append('<div id="' + allTextDiv + '" />');
                    //     if ( settings.allTextDiv.indexOf('.') != -1 ) $('body').append('<div class="' + allTextDiv + '" />');
                    // });
                    // $this.mousemove(function(event) {
                    //     $(settings.allTextDiv).text(strText).show().css({
                    //         left: event.pageX + 30,
                    //         top: event.pageY
                    //     });
                    // });
                    // $this.mouseout(function() {
                    //     $(settings.allTextDiv).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);

解决方案

上班时间脑子浆糊了，回家重新写了一遍，已经解决了，换个思路问题就简单很多了！

/**
 * 
 * @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'   // 省略号颜色
                allTextDiv: '#allText',       // 鼠标跟随完整文本框的DIV
                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 allTextDiv = settings.allTextDiv.replace(/[#|.]/g, '')
                    if ( settings.allTextDiv.indexOf('#') != -1 ) $('body').append('<div id="' + allTextDiv + '" />');
                    if ( settings.allTextDiv.indexOf('.') != -1 ) $('body').append('<div class="' + allTextDiv + '" />');
                }
            });
            $(document).on('mousemove', settings.el, function(event) {
                $(settings.allTextDiv).text( $(this).attr('data-text') ).show().css({
                    left: event.pageX + 30,
                    top: event.pageY
                });
            });
            $(document).on('mouseout', settings.el, function() {
                $(settings.allTextDiv).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);

这篇关于javascript - jQuery截取字符串长度的插件，遇到不能正确获取元素内text()的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！