デザイナーはここでコードを学習しますが、私の 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();
});
});
助けてくれてありがとう。まだ基本を学んでいて、まだここまで来ていませんが、すぐにはわかりません :)