скрыть элементы на основе фильтра

Question

Я новичок в jquery, и я пытаюсь сделать следующее: У меня есть страница с большим количеством изображений. Я добавил текстовое поле, с OnChange вызова этой функции:

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

} 

Дело в том, чтобы показывать только изображения, которые имеют «фильтр» где-то в имени класса.

EDIT

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

EDIT

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

Answer 1

Если вы хотите, чтобы соответствовать фрагментов Classname (например, чтобы показать «apple» при наборе «ple»), рассмотрите использование селектора attribute contains'[class*="'+filter+'"]'. В сочетании с указанными выше ответами: (». Фото„).

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

Answer 2

Использование 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 3

На самом деле, если вы желаете, чтобы показать те, которые названы со значением фильтра вы хотите использовать .not() вместо .filter()

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

Answer 4

этот путь вы фильтрации классов, если вы хотите, чтобы отфильтровать текст, который вы делаете это

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