Question

我编写了以下jQuery，它可以完美地满足我的需求。但我觉得它可以被压缩一点点或缩短。我有点像jQuery n00b，很抱歉，如果这很明显......任何提示？谢谢！

jQuery(document).ready(function($){

var number = $("#tags-list a").length,
    increment = 1 / number,
    opacity_num = "";

$($('#tags-list a').get().reverse()).each(function(i,el){
    el.id = i + 1;
        opacity_num = el.id / number - increment;
  $(this).css({ opacity: opacity_num });
        $(this).bind('mouseenter mouseleave', function() {
          $(this).toggleClass('tag-hovering');
        });
});

}）;

注意： jQuery(document).ready(function($)必须保留为无冲突包装器。

Answer 1

这是我能想到的最干净的方式。我拿出了相反的结果，因为它有点难看，只是交换了逻辑，所以不需要它。

我还将jQuery(document).ready(function($) {更改为jQuery(function($) {，因为他们做同样的事情而第二个更短。

jQuery(function($) {
  var items = $('#tags-list a'),
      number = items.length;

  items
    .attr('id', function(i){
      return number - i; 
    })
    .css('opacity', function(i) {
      return 1 - ( (i + 1) / number );
    })
    .hover(function() {
      $(this).toggleClass('tag-hovering');
    })
});

Answer 2

未经测试，但应该更清晰，阅读速度更快。根据我的理解，每次你执行$（“＃tags-list a”）时，它都会进行查找（无论是否缓存）以及启动函数。问题是，您可以保留引用，允许您直接与其最初提取的内容进行交互。当然，如果你向＃tags-list添加另一个'a'元素，它将不会更新。但是当你多次在相同的数据上调用它时它会更快。另外，$ .each在IE上很慢..所以你可以通过将它放在'for'循环中来加快速度。

jQuery(document).ready(function($){

    var i, el, tagList = $("#tags-list a").get();
    var number = tagList.length,
        increment = 1 / number,
        opacity_num = "";

    var mouseCallback = function() {
      $(this).toggleClass('tag-hovering');
    }
    for(i = tagList.length - 1; i>=0; i++) {
        el = tagList[i];
        el.id = i + 1;
        $(el).css({opacity: el.id / number - increment}).bind('mouseenter mouseleave', mouseCallback);
    }
});

旁注。我很少关心代码的实际长度 - 我一直更关心它的可读性和执行情况。我可以将一个完整的javascript应用程序放在一行中，但是如果它无法维护，为什么还要烦恼呢？如果由于加载时间而需要缩短代码，请在使脚本生效之前通过最小化器运行它。

Answer 3

jQuery(document).ready(function($){  
    var number = $("#tags-list a").length;

    $($('#tags-list a').get().reverse()).each(function(i,el){ 
        el.id = i + 1;    
        $(this).attr('id', i+1)
               .css({ opacity: i / number})         
               .bind('mouseenter mouseleave', function() {           
                   $(this).toggleClass('tag-hovering');         
               }); 
    }); 
});

我认为我的数学运算正确并清理了不透明度计算。还删除了额外的$（this）转换，只是做了一些链接

编辑需要设置el.Id = i + 1;

Answer 4

未测试：

jQuery(document).ready(function($) {
  var number = $("#tags-list a").length;
  $($('#tags-list a').get().reverse()).each(function(i,el) {
    $(this).attr('id', i+1)
           .css({ opacity: i / number) })
           .bind('mouseenter mouseleave', function() {
             $(this).toggleClass('tag-hovering');
           });
  });
});

修剪一些jQuery的脂肪

4 个答案: