基于过滤器隐藏元素

我是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

基于过滤器隐藏元素

回答

相关问题