jquery - 基于过滤器隐藏元素

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

使用 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()的位置，这样所有照片隐藏，然后显示过滤后的照片(而不是显示所有照片并隐藏过滤后的照片)。