0

更新: Jared の答えは解決策でした。これが私のコードです。実際に一致するセットがあった場合にリスト項目の非表示/表示を実行するために、else ステートメントを追加したところです。

$(document).ready(function() {
$("form#filterForm").submit(function () {
    var type = $("select#typeList option:selected").val();
    var style = $("select#styleList option:selected").val();
    var items = $(".container .content ul li").filter('.' + type + '.' + style);

    if (!items.length) {
        alert('no items...');
        return false;
    } else {

   $(".container .content ul li").hide();
 $(".container .content ul li"+type+style).show();
 mCustomScrollbars();
 return false;
    }

});
});

更新を終了します。いくつかのコードが機能していますが、最終ステップに進むのに問題があります。順序付けられていないリストにサムネイルのリストがあります。

<div class="content">
            <ul>
            <li class="portfolio_images type-portfolio_images category-commercial category-traditional"><img src="thumb_test-image1.jpg" /></li><li class="portfolio_images category-residential category-contemporary"><img src="thumb_test-image2.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-contemporary"><img src="thumb_test-image3.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial" ><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res3-3-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-residential category-contemporary" ><img src="thumb_test-image2.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-traditional"><img src="thumb_test-image1.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design" ><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-contemporary"><img src="thumb_test-image3.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res1-2-THUMB.jpg" /></li>
            </ul>
        </div>

各リスト項目には複数のカテゴリがあります。2 つの選択フィールドを含むフォームがあり、jQuery を使用して、リスト項目の classNames に対応する選択フィールドの値を取得しています。これらは変数として設定され、それに応じてリスト項目を表示および非表示にするために使用されます。 .

 <form id="filterForm" action="">
<select id="typeList" name="typeList">
<option value=".portfolio_images">All</option>
<option value=".category-commercial">category-commercial</option>
<option value=".category-residential">category-residential</option>
</select>

<select id="styleList" name="typeList">
<option value=".type-portfolio_images">All</option>
<option value=".category-traditional">category-traditional</option>
<option value=".category-contemporary">category-contemporary</option>
</select>
<input id="submit_btn" type="submit" value="submit" label="submit" />   </form>  

<script>
$(document).ready(function() {
$("form#filterForm").submit(function () {
var $selectTypeClass=$("select#typeList option:selected").val();
var $selectStyleClass=$("select#styleList option:selected").val();
$(".container .content ul li").not($selectTypeClass+$selectStyleClass).hide();
$(".container .content ul li"+$selectTypeClass+$selectStyleClass).show();
mCustomScrollbars();
return false;
});
});
 </script>

これは本当にうまくいきます。ただし、アイテムに 1 つのカテゴリがあり、他のカテゴリがない場合がいくつかあります。だから私がやろうとしているのは、テストまたはチェックして、選択した両方のクラスに一致するアイテムがないことを確認し、警告メッセージを表示することです(「両方の選択に一致するアイテムはありません」など)。そうではなく、両方に一致するものがある場合は、先に進み、通常どおり機能を実行します。

each() を使用してテストしようとしたため、問題が発生していますが、リストをループして常にアラートを返すため、機能しませんでした-基本的に最初に停止するためです

  • 一致しないリストで、ループから抜け出します。

    では、選択した両方のクラスに一致するアイテムがないかどうかを確認するように設定するにはどうすればよいでしょうか? each() で発生する反復とは対照的に、何らかの方法でセット全体にインデックスを付けて全体としてチェックする必要がありますか? ここで困惑しました-どんな助けでも、私は前もって感謝します.

    • 4

    3 に答える 3

    2

    .class1.class2 のような CSS (および Sizzle) セレクターで複数のクラスを使用できます。両方のクラスを持つ要素を具体的に検索し、長さをテストするだけです。 

    $(document).ready(function() {
   $("form#filterForm").submit(function () {
        var type = $("select#typeList option:selected").val();
        var style = $("select#styleList option:selected").val();
        var items = $(".container .content ul li").filter('.' + type + '.' + style);

        if (!items.length) {
            alert('no items...');
        }
    });
});
    于 2012-05-03T22:46:01.947 に答える
    0

    関数を使用し$.filter(function(index))て、複数のクラスを持つ要素をカウントし、そのカウントをアイテムの完全なリストと比較できます。

    複数のクラスを持つ要素

    var filtered = $('#foo li').filter(function() {
    return this.className.trim().indexOf(' ') > 0;
});

    http://jsfiddle.net/t4HfL/

    これは単に各要素の className プロパティにスペースがあるかどうかをチェックするだけなので、trim()余分な空白を含む要素を返さないように を使用することに注意してくださいclass="foo "。

    于 2012-05-03T22:58:09.013 に答える
    0

    hasClass JQUERY 関数を調べましたか?

    http://api.jquery.com/hasClass/

    それがあなたが探しているもののようですね...そうでない場合はお知らせください。さらにお手伝いします.

    于 2012-05-03T22:40:00.177 に答える