オプションを使用して検索機能用の画像にフィルタを適用する

こんにちは、特定のフィールドのオプションを設定し、検索ボタンが適用された後に適用されたフィルタの要件を満たす画像を表示するコードを記述しようとしていますクリックされました。オプションを使用して検索機能用の画像にフィルタを適用する

これはこれまでのコードです。以下のスニペットでわかるように、これらの画像に特定のカテゴリを追加して検索する方法がわかりません。たとえば、冒険、8+の評価、piのような本に公開する年を追加すると、すべてのオプションを希望どおりに設定し、検索をクリックすると同じものを含む書籍のみが表示されますその後

var sSelectedGenre = $('select[name="genre"]').val().toLowerCase(); // lower case the text after getting its selected value 
var sSelectedRating = $('select[name="rating"]').val().toLowerCase();

あなたの各：それらの上に置かカテゴリのjQueryで

.review-img { 
 
    cursor: pointer; 
 
    height: 160px; // height 
 
    //width: 30%; // width 
 
    } 
 

 
    #searchfield { 
 
    background-color:red; 
 
    height:150px; 
 
    margin-top:0px; 
 
    text-align: center; 
 

 
    } 
 

 
#main-search-fields { 
 
padding-top: 66px; 
 
background-color:red; 
 
} 
 

 
.selects-container { 
 
    display: inline-block; 
 

 
}

<body> 
 
    <div id ="searchfield"> 
 
    <div id="main-search-fields"> 
 
    <div class="selects-container"> 
 
    <p>Genre:</p> 
 
    <select name="genre"> 
 
    <option value="all">All</option> 
 
    <option value="action">Action</option> 
 
    <option value="adventure">Adventure</option> 
 
    <option value="animation">Animation</option> 
 
    <option value="biography">Biography</option> 
 
    <option value="comedy">Comedy</option> 
 
    <option value="crime">Crime</option> 
 
    <option value="documentary">Documentary</option> 
 

 
    </select> 
 
    </div> 
 
    <div class="selects-container"> 
 
    <p>Rating:</p> 
 
    <select name="rating"> 
 
    <option value="0">All</option> 
 
    <option value="9">9+</option> 
 
    <option value="8">8+</option> 
 
    <option value="7">7+</option> 
 
    <option value="6">6+</option> 
 
    <option value="5">5+</option> 
 
    <option value="4">4+</option> 
 
    <option value="3">3+</option> 
 
    <option value="2">2+</option> 
 
    <option value="1">1+</option> 
 
    </select> 
 
    </div> 
 
    <div class="selects-container selects-container-last"> 
 
    <p>Order By:</p> 
 
    <select name="order_by"> 
 
    <option value="latest">Latest</option> 
 
    <option value="oldest">Oldest</option> 
 
    <option value="year">Year</option> 
 
    <option value="rating">Rating</option> 
 
    <option value="likes">Likes</option> 
 
    <option value="alphabetical">Alphabetical</option> 
 
    </select> 
 
    <input type="button" id="search" value="search" /> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
    <section class='images'> 
 
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img> 
 
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img>  
 
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img> 
 
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img> 
 
</section>

出典

2017-03-14 cars

、あなたは{ジャンル}とval方法を使用して{評価}オプションの選択された値を取得したことができますタグは特定の{genre}と{ratings}でなければなりません（例：data_genre = "action" data_rating = "6"）

<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner" data_genre="action" data_rating="6" />

これは、これらの条件をマップするための「プロパティキー」として機能します。反復で、あなたはループごとまたは使用する$ .eachことができます。

ジャンル：各画像プロパティが一致した場合https://api.jquery.com/each/

その後は、[オプション]

例から選択した値に基づいて値をチェック：アドベンチャーは

評価：更なるガイダンスについては8

$('.review-img').each(function() { 
    var sDataGenre = $(this).attr('data_genre'); // image's action attribute 
    var sDataRating = $(this).attr('data_rating'); // 6 

    if (sDataGenre === sSelectedGenre && sDataRating === sSelectedRating) { 
     $(this).show(); 
    } 
});

は、ここにあるサンプルjsfiddleトンoヘルプ： http://jsfiddle.net/yctj37yx/（このコードをよりリファクタリングすることができます）

希望する場合は、このケースを参考にしてください。私はあなたのデータベースを管理するサーバー側の代わりに（TSQL/SQL）に検索フィルタ機能を持つことをお勧めしますが

出典

2017-03-14 14:03:41 eeya

このコードは機能しませんが、たとえば最新の – cars

などのオプションのみを追加すると参考になります。上記のサンプルコードを参照して、自分で試してみると、次に何をするのか分かります。もう一度、@ Rounin氏は、クライアント側またはサーバー側のアプローチを望むならば、それはあなた次第です。 – eeya

あなたはクライアント側とサーバー側のアプローチの違いを説明できます – cars

あなたが取り入れたいスケーラビリティの程度に応じて異なるアプローチがあります。

1）低については、レベルのスケーラビリティは、手動で各画像に属性data-* HTML5を追加することができます。

data-title="Life of Pi" 
data-genre="adventure" 
data-published="2001" 
data-rating="8"

2）より高いレベルのスケーラビリティのために、あなたは1つが各書籍に

を表現する、クライアント側の一連のオブジェクトを作成することができます

3）高水準のスケーラビリティのために、サーバー側のデータベースを構築し、MySQLなどのクエリ言語で問い合わせることができます。

出典

2017-03-14 14:04:25 Rounin

私はこのコードをどこに入れますか – cars

js fiddleで例を挙げてもらえますか – cars

クライアント側アプローチを採用するのか、サーバー側アプローチを採用するのかを判断する必要があります。また、プロジェクトの規模も考慮する必要があります。 – Rounin

オプションを使用して検索機能用の画像にフィルタを適用する

答えて

関連する問題