隐藏基于过滤器的元素

Question

我是jquery的新手,我正在尝试执行以下操作:我有一个包含大量图像的页面.我添加了一个文本框,onchange调用此函数:

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 />

Answer 1

如果您还想匹配类名片段（例如，在键入“ple”时显示“apple”），请考虑使用属性 contains选择器'[class*="'+filter+'"]'。结合上面的答案：

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