フィルタに基づいて要素を非表示にする

Question

jqueryを初めて使用しました。次の処理を実行しようとしています。 私にはたくさんの画像があるページがあります。

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

} 

ポイントはどこか自分のクラス名に「フィルタ」を持っている唯一のショーの画像にあること：私はのonchange は、この関数を呼び出すと、テキストボックスを追加しました。

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

の.not()を使用したいと思うでしょう（例えば、表示します"apple"と入力した場合）、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();  
} 

すべての写真が非表示になり、フィルタリングされたすべての写真が表示され、フィルタされた写真が表示されなくなります。あなたがフィルタ値で命名されたものを表示するために欠けている場合

Answer 3

実際に、あなたはまた、クラス名フラグメントのために一致させたい場合は代わりに.filter()

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

Answer 4

この方法、あなたはこの

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