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’ // 省略号颜色 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 />’);if ( settings.allTextp.indexOf(’.’) != -1 ) $(’body’).append(’<p />’); }); $(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 />’); // if ( settings.allTextp.indexOf(’.’) != -1 ) $(’body’).append(’<p />’); // }); // $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);
问题解答
回答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’, // 鼠标跟随完整文本框的pisPrompt: 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 />’); if ( settings.allTextp.indexOf(’.’) != -1 ) $(’body’).append(’<p />’);} }); $(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);回答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 算局部的还是全局的？据说某些比较老的浏览器会认为是全局的。这样的话，鼠标跟随内容都是最后一条就可以解释了。目前从代码来看我还看不出来其它可能造成这一现象的问题。
网公网安备