問題描述

做了個截取字符串長度的插件，當字符超過指定個數后截取字符，并鼠標跟隨顯示完整的內容提示。單獨寫功能的時候是可以實現的，但用下面的方式做成插件后，發現鼠標跟隨的內容都是最后一條的，而且不管字符有沒有超過都會顯示最后一條的內容，因為有部分內容時動態加載的，所以用了事件委托的方式。

(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);

問題解答

上班時間腦子漿糊了，回家重新寫了一遍，已經解決了，換個思路問題就簡單很多了！

/** * * @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 算局部的還是全局的？據說某些比較老的瀏覽器會認為是全局的。這樣的話，鼠標跟隨內容都是最后一條就可以解釋了。目前從代碼來看我還看不出來其它可能造成這一現象的問題。