jQuery選擇，要概括通過錨ID選擇

我有我的網站上一些代碼，顯示在博客的文章列表如下（會有具有相同類型的多個對象）：jQuery選擇，要概括通過錨ID選擇

<ul class="article category1"> 
    <li> etc 
    <li> 
</ul> 
<ul class="article category2"> 
    <li> etc 
    <li> 
</ul> 
<ul class="article category3"> 
    <li> etc 
    <li> 
</ul>

我有，所以你只有如下得到一個類別顯示的過濾列表中的一些jQuery代碼：

$("#showall").click(function() { 
    $("ul.article").show('fast'); 
}); 
$("#showcategory1").click(function() { 
    $("ul.article.category1").show('fast'); 
    $("ul.article").not("ul.category1").hide('fast'); 
});

當你點擊相關鏈接，即

<a id="showall">All</a> 
<a id="category1">Category 1</a>

目前我有大約9類處理，所以10個片段的jQuery看起來非常低效（它是可怕的低效率）。我不知道如何推廣代碼，以便它獲取錨的ID（或者類），然後將其應用於相關列表。請幫忙嗎？

謝謝！事件

來源

2010-07-19 Josh

您可以通過從類別列表工作通用化代碼：

$("#showall").click(function() { 
    $("ul.article").show('fast'); 
}); 

var cats = "food cars books"; 
$.each(cats.split(" "), 
    function(cat) { 
     $("#show"+cat).click(function() { 
      $("ul.article."+cat).show('fast'); 
      $("ul.article").not("ul."+cat).hide('fast'); 
     }); 
    });

這不會改變運行時行爲，只是減少了首先創建函數所需的代碼量。這裏的關鍵思想是jQuery選擇器不必是字面字符串，它們可以由文字和變量構成。

來源

2010-07-19 03:13:19

如果你使用'.siblings'，你可以鏈接最後兩行到'$（「ul.article。」+ cat）.show（'fast'）。siblings（）。hide（'fast'）; ' – 2010-07-19 03:31:45

謝謝，這真棒:) 應該把.each（cats.split（「」），function（cat））改爲.each（cats.split（「」），function（i，貓））來完成這項工作。 – Josh 2010-07-19 03:56:10

處理程序函數被傳遞的事件對象（以及觸發事件的元件也被傳遞作爲this）。您可以使用它來獲取id，然後從那裏操作 - 如果需要，可以使用jQuery庫中的DOM遍歷函數來找到正確的列表。

來源

2010-07-19 03:10:47 Amber

試試這個（未經測試，但應該給你一個想法）：

$("a[id^=category]").click(function() { 
    $("ul." + $(this).attr("id")).show("fast").siblings().hide("fast"); 
});

來源

2010-07-19 03:11:38

+1擊敗'.siblings'。 – 2010-07-19 03:16:14

他沒有試圖點擊文章，有單獨的鏈接控制顯示哪些文章。 – 2010-07-19 03:16:33

您可以使用$(".class").click代替$("#showcategory1").click作爲觸發器，使用id選擇特定文章並使用.siblings.hide()隱藏所有其他文章。

來源

2010-07-19 03:15:05

jQuery選擇，要概括通過錨ID選擇

回答

相關問題