jquery toggler的效率

时间:2010-05-27 21:20:06

标签: javascript jquery

以下是我的代码的链接:http://jsbin.com/edago3/edit

我很想知道可以做些什么改进以使其更小更高效。

感谢任何帮助。

2 个答案:

答案 0 :(得分:2)

如果您正在寻找更简洁的代码you can see a full updated sample here,可以进行一些改进。我将在下面列出您可以保存代码的主要区域(当然,等效功能)。

主要部分:

$($li).children('a').after(
  $(document.createElement('span'))
  .html("  toggler  ")
  .addClass("gm-toggler")
  .hide()
);

可以缩短为......

$li.children('a').after(
  $('<span>', { html: "&nbsp; toggler &nbsp;", 'class': "gm-toggler"}).hide()
);

此...

$li.hover(function() {
  $('.gm-toggler', this).show();
}, function(){
  $('.gm-toggler', this).hide();
});

可以缩短为......

$li.hover(function(){
  $('.gm-toggler', this).toggle();
});

此...

if($(this).parent('li').hasClass('active')){
  // ... remove its active class ...
  $(this).parent('li').removeClass('active');
} else {
  // ... otherwise give it an active class.
  $(this).parent('li').addClass('active');
}

可以缩短为......

$(this).parent('li').toggleClass('active');

最好问一下您对哪些部分有疑问,我可以在此处找到我所用方法的相关文档:.toggle().toggleClass()jQuery(html, props)

答案 1 :(得分:0)

看起来写得很好,干得好!我找到的唯一可以改进的小东西是第17行,更改:

.html("&nbsp; toggler &nbsp;")

为:

.text("toggler")

然后使用CSS在左侧和右侧填充.gm-toggler

使用.html依赖.innerHTML并且比标准Javascript文本插入慢(但它会将&nbsp;写为文本,因此填充,这更适合分离无论如何演示。)

此外,在此之前的行中,您可以说$('<span>'),jQuery将完全按照您的编写方式构建它。更具可读性。