0

詳細については編集:

Twitter ブートストラップ フレームワークを使用して Web サイトを設計しています。jqueryを使用していくつかのdivを除外したいので、オンラインで調査を行ったところ、次のものが得られました。

最初に、ul リストをスタイリングするいくつかの css を含むフィルター ボタン リスト (div 内) があります。

<div class="row">
<div class="col-lg-8">
<ul id="filterOptions">
  <li class="active"><a href="#" class="all">All</a></li>
  <li><a href="#" class="UX">UX</a></li>
  <li><a href="#" class="UI">UI</a></li>
  <li><a href="#" class="Graphic">Graphic</a></li>
  <li><a href="#" class="Design">Design</a></li>
</ul>

次に、いくつかのネストされた div

  <div class="row">
  <div id="ourHolder">   
  <div class="col-lg-6 UX">
  <img src="img/DTB1.png">
   </div>


  <div class="col-lg-6 UI">
  <img src="img/EDB1.png">
  </div>

  <div class="col-lg-6 Graphic">
  <img src="img/STB1.png">
  </div>

  <div class="col-lg-6 Design">
  <img src="img/MOV1.png">
  </div>

  </div>
  </div>

次に、Jquery

$(document).ready(function() {

 $('#filterOptions li a').click(function() {

var ourClass = $(this).attr('class');

$('#filterOptions li').removeClass('active');


$(this).parent().addClass('active');

if(ourClass == 'all') {

  $('#ourHolder').children('div.item').show();
}
else {

  $('#ourHolder').children('div:not(.' + ourClass + ')').hide();

  $('#ourHolder').children('div.' + ourClass).show();

}

return false;

  });

});

どういうわけか、これらのボタンのどれも私のために働いていません.誰かが私に手を差し伸べて、私が欠けているものを教えてくれるなら、それは非常に役に立ちます!

ありがとうございました

4

1 に答える 1

1

私はあなたのコードをフィドルに入れましたが、うまくいくようです：http://jsfiddle.net/xaNVL/

問題は、ネストされた div が #ourHolder の直接の子ではないことです。その場合、.find()代わりにを使用してみることができます.children()。

<div id="ourHolder">
<div class="col-lg-6 UX">
    <img src="img/DTB1.png">
</div>
<div class="col-lg-6 UI">
    <img src="img/EDB1.png">
</div>
<div class="col-lg-6 Graphic">
    <img src="img/STB1.png">
</div>
<div class="col-lg-6 Design">
    <img src="img/MOV1.png">
</div>

于 2013-08-06T10:36:26.070 に答える