Question

上周，一个函数用于在一些选择器中删除文本。

我正在调用这样的函数：

ellipsiText（＆＃39; .class＆＃39;，50）传递选择器和我想要的文本的最大长度。这很好，但我试图使它成为一个插件，像这样调用：$（＆＃39; .class＆＃39;）。ellipsiText（50）。

所以，我正在阅读jquery网站上的教程，我明白了该怎么做。但我认为我对＃34;这个＆＃34;有问题。 seletor。这是我原来的功能：

function ellipsiText(selector,maxLength){


    var array = $(selector).map(function(){
        return $(this).text();
    }).get();

    var i;

    var teste = [];

    for (i=0;i<array.length;i++){

        if (array[i].length > maxLength){

        teste.push(array[i].substr(0,maxLength) + "...");

        } else {

            teste.push(array[i]);
        }
    }

    for (var i=0;i<teste.length;i++){

    $(selector).each(function(i){

        $(this).text(teste[i]);

    });

    }


}

这是我尝试制作一个jquery插件：

(function ($) {

    $.fn.ellipsiText = function(length){

        var array = $(this).map(function(){
            return $(this).text();
            }).get();

        var i;
        var teste = [];

        for (i = 0; i < array.length; i++){
            if (array[i] > length){
                teste.push(array[i].substr(0,length) + "...");
            } else {
                teste.push(array[i]);
            }
        }

        $(this).each(function(i){

            $(this).text(teste[i]);

        }); 
    };

}(jQuery));

我做错了什么？

Answer 1

首先，问题不是问题，但在第一个函数范围中，您可以使用$(this)而不是this.map/this.each。

问题是，在第二个代码中你做了

if (array[i] > length)

而不是

if (array[i].length > length)

与jQuery插件没什么关系！

http://jsfiddle.net/UY88r/

Answer 2

你已经有了一个工作功能，只需使用它。

$.ellipsiText = ellipsiText;
$.fn.ellipsiText = function (count) {
    ellipsiText(this, count);
}

现在您可以像以下任何一样使用它：

ellipsiText('.class',50);
$.ellipsiText('.class',50);
$('.class').ellipsiText(50);

当你可以使用它时，重写你已经有的功能是没有意义的。

Answer 3

这是未经测试的，但基本结构是这样的。当需要一个循环时，你的代码中也有很多循环。

$.fn.ellipsiText= function(options) {

    var settings = $.extend({  //nice way to give to give defaults
        length : 50,
        ellipsi : "..."
        }, options );

    return this.each(function() {  //the return is needed for chaining
        var elem = $(this);
        var txt = elem.text();
        if (txt.length>settings.length) {
             elem.text(txt.substr(0,settings.length) + settings.ellipsi );
        }
    });

};

并将其命名为

$( "div.defaults" ).ellipsiText();

$( "div.foo" ).ellipsiText({
    length : 10
});

$( "div.more" ).ellipsiText({
    length : 10,
    ellipsi : "<more>"    
});

在我的jquery插件中需要帮助

3 个答案: