基於過濾器隱藏元素

我是jquery的新手，我正在嘗試執行以下操作：我有一個包含大量圖像的頁面。我添加了一個文本框，與平變化調用這個函數：基於過濾器隱藏元素

function filter() { 
    var filter = $("#filter").val() 
    $('.photo').show(); 
    if (filter != '') $('.photo').find('.'+filter).hide(); 

}

問題的關鍵是，只顯示那些在他們的類名是「過濾器」地方圖像。

編輯

<a name="test"></a> 

<h3>Tests</h3><br /> 
<img class="photo livre_gang_leader.jpg" src="/images/test/livre_gang_leader.jpg" /> 
<img class="photo stephen_king_fatal.jpg" src="/images/test/stephen_king_fatal.jpg" /> 
<img class="photo livres_millenium.jpg" src="/images/test/livres_millenium.jpg" /></a> 
<img class="photo martin_page_stupide.jpg" src="/images/test/martin_page_stupide.jpg" /> 
<img class="photo Civilization-V-Title.jpg" src="/images/test/Civilization-V-Title.jpg" /> 
<br /><br />

編輯

<form onSubmit="javascript:filter()"> 
    <input type="textbox" placeholder="Filtre" id="filter" /> 
    <input type="submit" value="filtrer"> 
</form><br />

來源

2011-02-08 Manu

可能找到$（’ 。'+ filter）必須被$（'。photo。'+ filter）替換，但沒有html標記，很難說清楚。你能提供嗎？ – BiAiB 2011-02-08 14:45:38

如果你也想匹配類名片段（如展示在輸入「ple」時輸入「apple」），請考慮使用attribute contains選擇器'[class*="'+filter+'"]'。（」照片‘）：與上面的答案相結合。

function filter() { 
    var filter = $("#filter").val(); 
    var photos = $('.photo'); 
    photos.show(); 
    if (filter != '') photos.not('[class*="'+filter+'"]').hide();  
}

來源

2011-02-08 14:55:54 yscik

使用jQuery的.filter()方法，而不是.find()：

function filter() { 
    var filter = $("#filter").val(), 
     photos = $('.photo'); // don't forget to cache your selectors! 

    photos.show(); 

    if (filter != '') 
     photos.filter('.'+filter).hide();  
}

如果你想顯示埃爾基於此過濾器，只需在代碼中交換.hide()和.show()的地方，以便所有照片都隱藏起來，然後顯示過濾後的照片（而不是隱藏顯示和過濾的所有照片）。

來源

2011-02-08 14:44:27

其實，如果你是想表明，被命名爲與過濾器值那些你將要使用.not()代替.filter()

function filter() { 
    var filter = $("#filter").val(); 
    $('.photo').show(); 
    if (filter != '') $('.photo').not('.'+filter).hide();  
}

來源

2011-02-08 14:48:42

您還可以保留`filter（）`並在`hide（）`和`show（）`周圍交換。 – 2011-02-08 14:57:46

這樣你過濾類，如果要過濾文本你這樣做

$(".photo").hide(); 
$(".photo:contains("+filter+")").show();

來源

2012-09-09 12:08:37

基於過濾器隱藏元素

回答

相關問題