最近对jquery 1.4.3的更新在我的一个脚本中引入了一个小行为错误,我只是看不出问题所在。
我使用脚本的方式意味着我必须使用最新的jquery。
我认为它必须在onClick函数中。 The odd behavior introduced can be seen here: 一个test page with console log here 当第一次点击阅读更多链接时,它们会立即显示,当第二次点击时,它们会以慢速动画显示它们应该显示。
我使用的变量等同于:
length: %id=truncate%, // 200
minTrail: 0,
moreText: "%id=open%", // read more
lessText: "%id=close%", // close
ellipsisText: "%id=starttrunk%", // ...
moreAni: "%id=openspeed%", // slow
lessAni: "%id=closespeed%" // slow
这是脚本:
(function($){
$.fn.jTruncate = function(options) {
return this.each(function() {
obj = $(this);
var body = obj.html();
if(body.length > options.length + options.minTrail) {
var splitLocation = body.indexOf(' ', options.length);
if(splitLocation != -1) {
// truncate tip
var splitLocation = body.indexOf(' ', options.length);
var str1 = body.substring(0, splitLocation);
var str2 = body.substring(splitLocation, body.length - 1);
obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
'</span>' + '<span class="truncate_more">' + str2 + '</span>');
obj.find('.truncate_more').css("display", "none");
// insert more link
obj.append(
'<div class="clearboth">' +
'<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
'</div>'
);
// set onclick event for more/less link
var moreLink = $('.truncate_more_link', obj);
var moreContent = $('.truncate_more', obj);
var ellipsis = $('.truncate_ellipsis', obj);
moreLink.click(function() {
if(moreLink.text() == options.moreText) {
moreContent.show(options.moreAni);
moreLink.text(options.lessText);
ellipsis.css("display", "none");
} else {
moreContent.hide(options.lessAni);
moreLink.text(options.moreText);
ellipsis.css("display", "inline");
}
return false;
});
}
} // end if
});
};
})(jQuery);
$().ready(function() {
$('#%id% .trunky').jTruncate({
length: %id=truncate%,
minTrail: 0,
moreText: "%id=open%",
lessText: "%id=close%",
ellipsisText: "%id=starttrunk%",
moreAni: "%id=openspeed%",
lessAni: "%id=closespeed%"
});
});
答案 0 :(得分:3)
尝试将'extend'行更改为
var effectiveOptions={};
$.extend(effectiveOptions,defaults,options);
然后使用effectiveOptions
代替选项
因为否则你会在每次调用时破坏你的默认值($.extend
破坏性地修改它的第一个参数)并且var options
是不必要的,因为它已经是本地的,因为它在参数列表中。