国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - jQuery截取字串長度的插件,遇到無法正確取得元素內text()的問題
typecho
typecho 2017-06-28 09:28:00
0
2
1037

做了個截取字串長度的插件,當字符超過指定個數(shù)後截取字符,並滑鼠跟隨顯示完整的內容提示。
單獨寫功能的時候是可以實現(xiàn)的,但用下面的方式做成插件後,發(fā)現(xiàn)滑鼠跟隨的內容都是最後一條的,而且不管字元有沒有超過都會顯示最後一條的內容,因為有部分內容時動態(tài)載入的,所以用了事件委託的方式。

(function($, window, document, undefined) {
    // 創(chuàng)造一個公共變量來構建一個私有方法
    var privateFunction = function() {}
    var methods = {
        // 字符截取,鼠標觸發(fā)跟隨詳情提示框
        subString: function (options) {
            return this.each(function(index) {
                var $this = $(this);
                var defaults = {
                    el: '',      // 目標元素
                    charNum: 22,    // 截取字符個數(shù)
                    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 id="' + allTextp + '" />');
                        if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('<p class="' + allTextp + '" />');
                    });
                    $(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 id="' + allTextp + '" />');
                    //     if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('<p class="' + allTextp + '" />');
                    // });
                    // $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);
typecho
typecho

Following the voice in heart.

全部回覆(2)
世界只因有你

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

/**
 * 
 * @authors xxy
 * @date    2017-06-26 19:19:42
 * @url http://www.hifrontend.com
 */

(function($, window, document, undefined) {
    var methods = {
        // 字符截取,鼠標觸發(fā)跟隨詳情提示框
        subString: function (options) {
            var $this = $(this);
            var defaults = {
                el: 'li',      // 目標元素
                charNum: 22,    // 截取字符個數(shù)
                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('<p id="' + allTextp + '" />');
                    if ( settings.allTextp.indexOf('.') != -1 ) $('body').append('<p class="' + allTextp + '" />');
                }
            });
            $(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
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 算局部的還是全局的?據(jù)說某些比較老的瀏覽器會認為是全域的。這樣的話,滑鼠跟隨內容都是最後一條就可以解釋了。目前從程式碼來看我還看不出來其它可能造成這現(xiàn)象的問題。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板