抽象这个jQuery功能

在这里得到了很多很棒的帮助！这里的代码已经得到了几个人的帮助。希望有人能帮助我把它提升到一个新的水平。抽象这个jQuery功能

基本上，我有一个代码，它会在给定的时间段后向左侧导航栏中的单击项添加复选标记。页面上会出现其他链接，这些链接将触发相应左侧链接的相同行为。因此，例如左侧会有10个链接，顶部有10个链接，每个链接都需要触发左侧的相应链接。我想抽象这个代码，以便我可以从不同的来源激活它。为了简化起见，可以考虑如何从导航之外的源中触发这段代码。这里的代码：

$(function() { 

var thetimeout=null; 
$('#leftnav li a').click(function() { 
     $('#leftnav li').not('this').css('background-position','left bottom'); 
     $(this).parent().css('background-position','left top'); 
     if(thetimeout!=null) { 
      window.clearTimeout(thetimeout); 
     } 

     thetimeout=window.setTimeout($.proxy(function() { 
       $(this).parent().css('background-image','url(images/check.png)'); 
      }, this) 
     ,5000); 
});

}）;

我有一个工作演示（与顶部的链接不工作）了here.

感谢您的时间，我真的很感激。

来源

2010-08-18 Johnny

如果您更容易找到实际问题，可能会获得更多帮助。我不得不多次阅读这个问题才能找出你真正想问的问题。 – jergason 2010-08-18 02:22:48

也许这会工作？

wireClickEvent("#leftnav li"); 
wireClickEvent("#topnav li"); 

function wireClickEvent(selector) { 
    $(selector + ' a').click(function() { 
     $(selector).not('this').css('background-position','left bottom'); 
     // rest of your code 
     // ... 
    } 
}

来源

2010-08-18 02:26:16 house9

这是什么让jQuery插件如此之好。把你的代码变成一个插件。

看看你的来源，我看到顶部链接不在列表中。通过将它们放入列表中，我们可以以相同的方式对其进行定位。

$('.nav-items,.top-items').checkMyLinks();

由于我们的目标是列表，我们可以在其子项上执行我们的插件逻辑。

$.fn.checkMyLinks=function(opt){ 
    return this.each(function(){ 
    var t=$(this), 
     timer=null;// each plugin instance has its own timer 

    t.delegate('click', 'li a', function(e){ 
     var parent=$(this).parent();//the <li> above the clicked link 

     //css classes here? 
     t.find('li').css({backgroundPosition: 'left bottom'}); 
     parent.css({backgroundPosition: 'left top'}) 

     //deal with your timer... 
    }); 
    }); 
};

如果您不想将顶部链接放到列表中，您可以修改插件以适应。

祝你好运！

来源

2010-08-18 06:33:58 czarchaic

抽象这个jQuery功能

回答

相关问题