另一個關於函數的jQuery noob問題

我想更多地「功能化」我的jQuery代碼，而不是編寫一些獨立的代碼片段。這是一個例子。比方說，我有一些裏的，我想作爲觸發器來使用，就像這樣：另一個關於函數的jQuery noob問題

<li class="alpha-init" id="a-init">A</li> 
<li class="alpha-init" id="b-init">B</li> 
<li class="alpha-init" id="c-init">C</li>

而且有些東西，我想對應於隱藏和顯示的點擊這些觸發器，像這樣：

<ul id="a-sub" class="alpha-popdown"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

<ul id="b-sub" class="alpha-popdown"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 


<ul id="c-sub" class="alpha-popdown"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul>

如果我想寫各一個小片段，我可以這樣做：

$('li.alpha-init #a-init').click(function(){ 
    $('ul#a-sub').slideToggle(200); 
}

但是，這意味着，因爲有套的鏈接和子菜單寫儘可能多的片段。我怎樣才能把它寫入一個函數？我不打算「吃一天」，因此，如果您覺得寫作會有很多解釋，我們將非常感激。非常感謝！

來源

2009-07-13 nickmjones

$('li.alpha-init').click(function(){ 
    $('ul#'+this.id.substr(1) + "-sub").slideToggle(200); 
}

來源

2009-07-13 05:10:41

如果你不想做字符串操作，這將是在那裏我會考慮在α-INIT元素的「相對」屬性保管相關的UL ID值，然後用這個代替上述SUBSTR通話的情況下， .attr（「rel」） – 2009-07-13 05:20:42

這很棒。我一直在想其他的東西，比如數組和每個（），但是這個效果很好。謝謝。 – nickmjones 2009-07-13 06:07:59

您是否考慮過使用jQuery UI Tabs？這聽起來幾乎完全像你想要的。您只需設置不同於默認值的選項卡即可！

來源

2009-07-13 05:11:07

jQuery UI的有一些非常好的技巧，但它也可以是矯枉過正簡單的效果，而且它也不會幫助「littlerobothead」在這裏學到什麼東西。 – 2009-07-13 05:16:18

是的。雖然UI標籤可能是根據他的要求下降的正確途徑。 – 2009-07-13 05:23:38

首先，id在你的頁面上應該是唯一的。您只需使用選擇器$('#a-init')即可訪問它。

我會寫，像這樣（爲每個項目）：

HTML：

<li class="alpha-init" id="a-init"> 
<div>A</div> 
<ul id="a-sub" class="alpha-popdown"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 
</li>

，然後寫的jQuery的：

$('li.alpha-init').click(function(){ 
    $(this).children('ul.alpha-popdown').slideToggle(200); 
}

的基本思想是使用$（this）方法訪問被單擊的項目並選擇相對於父元素的菜單元素。

來源

2009-07-13 05:13:29

我使用了Artem Barger和John Sheehan的代碼組合。感謝大家的幫助;現在我睡覺了！

來源

2009-07-13 06:09:23 nickmjones

另一個關於函數的jQuery noob問題

回答

相關問題