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()的位置，以便隐藏所有照片，然后显示已过滤的照片（而不是所有照片）显示的照片和隐藏的过滤后的照片。

Answer 2

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

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

Answer 3

这样你就过滤了类，如果你想要过滤文本，那么

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

Answer 4

实际上，如果您想要显示使用过滤器值命名的那些，您需要使用.not()而不是.filter()

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

隐藏基于过滤器的元素

4 个答案: