Question

jquery中有几个列表过滤器（流沙，过滤器项目等），但我希望按类过滤div。

我想要与上面相同的功能 - 您选择附加到课程的菜单项，其他项目淡出。

任何人都可以在任何地方看到这样的事情吗？

Answer 1

我最终使用了：

    $("#box").click(function() {
$(".box").fadeIn();

}）;

$("#logo").click(function() {
 $(".box").fadeIn();
$(".box:not(.logo)").fadeOut();

}）;

$("#print").click(function() {
 $(".box").fadeIn();
$(".box:not(.print)").fadeOut();

}）;

$("#web").click(function() {
 $(".box").fadeIn();
$(".box:not(.web)").fadeOut();

}）;

然后：

     <li><a  id="box" href="#box">All</a></li>  
 <li><a id="logo" href="#logo">Logo</a></li>  
 <li><a id="print" href="#print">Print</a></li>  
 <li><a id="web" href="#web">Web</a></li>  
 <li><a href="#illustration">Illustration</a></li>

哪个效果很好，除了由于jquery.masonry.js布局，div淡出的区域，现在有一个空位。我需要弄清楚如何为每个onclick重新加载砌体，以便将剩余的项目改组为新的布局。

对此的看法？并感谢您的帮助！

Answer 2

很难理解你在问什么。但这会给你一个开始的地方吗？

$("#myMenu ul li").mouseenter(function() {
  $(this).addClass("selected");
  $(this).siblings().addClass("other-selected");
});

Answer 3

Quicksand看起来会做你想做的事情：来自文档 - '在最基本的层面上，Quicksand将一个项目集合替换为另一个项目。

我认为您只需要添加一个元素来显示过滤结果，如下所示：

<ul id="flavourFilter">
    <li class="vanilla">Vanilla</li>
    <li class="strawberry">Strawberry</li>
    <li class="asparagus">Asparagus</li>  
</ul>

<div id="source">
  <div id="box1" class="vanilla">
  </div>
  <div id="box2" class="vanilla">
  </div>
  <div id="box3" class="strawberry">
  </div>
  <div id="box4" class="strawberry">
  </div>
  <div id="box5" class="asparagus">
  </div>
  <div id="box6" class="asparagus">
  </div>
</div>

<div id="display"></div>

你的jQuery会是这样的：

$(function(){
    //To load the unfiltered list into the display as the initial state:
    $('#display').quickSand($('#source li'));

    //To filter based on clicks in the menu:
    $('#flavourFilter li').click(function(){
        $('#display').quickSand($('#source li.' + this.className));
    });
});

可能有一种方法可以修改流沙，为源和显示器使用相同的元素（通过隐藏/显示元素，而不是从DOM中添加和删除它们），但这应该可以帮助您启动并运行，我认为

如果您需要更多详细信息，请与我们联系！

Answer 4

我也想这样做，但无法弄清楚如何克服空白问题。我知道Mansory的最新版本确实支持过滤，但我在过滤DOM时发现它有点儿错误。

您可能只想尝试更改 .box 的不透明度以获得滤镜效果。见下文：

// this filters all box divs related to web
$("#web").click(function() {
  $(".box").stop().animate({opacity : 1});
  $(".box:not(#web)").stop().animate({opacity : 0.2}); 
  return false;
});

// shows all box divs
$("#all").click(function() {
  $(".box").stop().animate({opacity : 1});
  return false;
});

Answer 5

我认为你想要的是：

HTML：

<ul>
  <li class="red">Red</li>
  <li class="green">Green</li>
  <li class="blue">Blue</li>
</ul>
<div>
  <div class="red">...</div>
  <div class="green">...</div>
  <div class="green">...</div>
  <div class="green">...</div>
  <div class="blue">...</div>
  <div class="blue">...</div>
</div>

jQuery的：

$("ul li").click(function() {
  visibleClasses = $(this).attr("class").split(" ");
  $("div div").hide(); // or slideUp / fadeOut
  for(i in visibleClasses) {
    $("div div."+visibleClasses[i]).fadeIn(500); // or slideDown / show
  }
});

我希望它有所帮助...

按类过滤div - jquery

5 个答案: