jquery - 抽象这个 jQuery 函数

Question

在这里得到了很多很大的帮助!这里的代码得到了一些人的帮助。希望有人能帮助我将其提升到一个新的水平。

基本上，我有代码会在给定时间段后向左侧导航中单击的项目添加复选标记。页面上还会有其他链接，这些链接将触发相应左侧链接的相同行为。例如，左侧有 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.

感谢您抽出宝贵的时间，我真的很感激。

Answer 1

这就是 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...
    });
  });
};

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

祝你好运!