2

デザイナーはここでコードを学習しますが、私の js や jquery を使用することはあまりありません。この男とほぼ同じチェックボックスフィルターを取得しようとしています: http://jsfiddle.net/BCbeU/しかし、私が構築しているサイトで jsfiddle のように実行するようには見えません。

チェックボックスのHTMLは次のとおりです。

    <div class="tags">
    <label><input type="checkbox" rel="all"/> Show All </label>
    <label><input type="checkbox" rel="one"/> 1 Bedroom </label>
    <label><input type="checkbox" rel="two"/> 2 Bedroom </label>
    <label><input type="checkbox" rel="below"/> Below $1500 </label>
    <label><input type="checkbox" rel="above"/> Above $1500 </label>
</div>

フィルタリングしようとしているアイテムのhtmlは次のとおりです。

<div id="shelf1-housing">
<ul class="results">
    <li class="all one">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment2.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

    <li class="all below">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment1.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

    <li class="below all">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment2.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

    <li class="all above">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment1.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

    <li class="all">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment2.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

</ul><!--End of Results-->
</div><!--End of Shelf1-Housing-->

そして、ここにJavaScriptがあります：

$('div.tags').delegate('input:checkbox', 'change', function(){
     var $lis = $('.results > li').hide();
     //For each one checked
     $('input:checked').each(function(){
          $lis.filter('.' + $(this).attr('rel')).show();
     });      
});

助けてくれてありがとう。まだ基本を学んでいて、まだここまで来ていませんが、すぐにはわかりません :)

4

2 に答える 2

0

この小さな例が役に立つかもしれません。

jQueryでチェックボックスにチェックを入れたり外したり

于 2012-12-12T08:27:25.307 に答える
0

あなたのウェブサイトからコードをコピーしてフィドルを作成しました。http://jsfiddle.net/LXymq/を確認してください

次の変更が行われました:
1) 結果と呼ばれるクラスで Li を div に追加しました。これがあなたのやり方です。
<div class="results"> ... All LIs ... </div>

2) DOM の準備が整う前にコードが実行されたため、すべてのコードを $(document).ready 関数に追加しました。

$(document).ready(function() { ... all your code inside this .... });

4）美しさのために画像パスをハードコードしました。

于 2012-12-12T06:36:51.667 に答える