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

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

祝你好运！

Answer 2

也许这会有用吗？

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
        // ...
    }
}

抽象这个jQuery函数

2 个答案: