클래스 별 필터 div - jquery

Question

jquery (quicksand, filterprojects 등)에는 몇 가지 목록 필터가 있지만 클래스별로 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(); 

});

한 다음 :

인해 jquery.masonry.js 레이아웃을 제외하고 잘 작동

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

, 사업부가 페이드 아웃 영역은, 이제 빈 곳이있다. 나머지 항목을 새 레이아웃으로 섞어서 각 onclick에 대해 벽돌을 다시로드하는 방법을 알아야합니다.

그 생각은 무엇입니까? 그리고 도움에 감사드립니다!

Answer 2

당신이 무엇을 요구하는지 이해하기가 어렵습니다. 그러나 이것은 당신에게 시작할 곳을 제공합니까?

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

Answer 3

설명서에서 - '기본 수준에서 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 
    } 
}); 

...