抽象這個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功能

回答

相關問題