[英]Need help in my jquery plugin
上周,一個函數用於在一些選擇器中刪除文本。
我正在調用這樣的函數:
ellipsiText('。class',50)傳遞選擇器和我想要的文本的最大長度。 這工作正常,但我試圖使它成為一個插件,像這樣調用:$('。class')。ellipsiText(50)。
所以,我正在閱讀jquery網站上的教程,我明白了該怎么做。 但我認為我對“這個”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));
我究竟做錯了什么?
首先,問題不是問題,但在第一個函數范圍中,不是$(this)
,而是使用this.map/this.each
。
問題是,在你做的第二個代碼中
if (array[i] > length)
代替
if (array[i].length > length)
與jQuery插件無關!
你已經有了一個工作功能,只需使用它。
$.ellipsiText = ellipsiText;
$.fn.ellipsiText = function (count) {
ellipsiText(this, count);
}
現在您可以像以下任何一樣使用它:
ellipsiText('.class',50);
$.ellipsiText('.class',50);
$('.class').ellipsiText(50);
當你可以使用它時,重寫你已經工作的功能是沒有意義的。
這是未經測試的,但基本結構是這樣的。 當需要一個循環時,你的代碼中也有很多循環。
$.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>"
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.