0

编辑以获取更多详细信息：

我正在使用 twitter 引导框架设计一个网站。我想用jquery过滤掉几个div，所以我在网上做了一个研究，这就是我得到的。

首先是过滤器按钮列表（在 div 内），并带有一些 css 样式的 ul 列表。

<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 回答