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

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

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

/** * * @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);

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