jquery 벽돌을 사용하는 컨테이너가 두 개 이상인 방법

Question

웹 사이트에 탭을 설정하고 각 탭의 내용에 Masonry를 사용하고 싶지만 한 번에 한 탭 씩만 작업 할 수 있습니다.

처음에는 일반 선택기를 사용하여 각 탭에서 사용하려고했습니다. 그러나 이것은 첫 번째 탭에서 작동했습니다.

<!--Masonry kit--> 
<script type="text/javascript" src="http://localhost/LazyDuck/masonry-site/js/jquery.masonry.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(window).load(function() { 

var $container = $('#container'); 
var $container = $('#dining'); 
var $container = $('#events'); 
var $container = $('#climbing'); 
var $container = $('#wildlife'); 
var $container = $('#shopping'); 
var $container = $('#kids'); 
var $container = $('#sport'); 


$container.masonry({ 
    itemSelector: '.item', 
    gutterWidth : 10, 
    isAnimated: !Modernizr.csstransitions 
}); 
});}); 

을하지만 그 중 하나가 작동하지 않습니다 그때 더 용기 변수를 추가했습니다. 이것은 간단한 일이지만 JavaScript 코딩이 그렇게 좋지는 않다. 나는 위를 짐작했다. :(

Answer 1

내가 JQuery와 구문의 더 생각하지만 나는 눈에 보이는 내용이없는 경우 벽돌 늘 일을 생각한다. 그것은 볼 수있는 사업부에 적용 할 수있다.

것은 그래서 하나 개의 방법이하는 것 .. 나는 큰 알 수 없음 .. 가시적 동안 모든 것을 할 후 숨 깁니다.

var $container = $('#container'); 
var $container = $('#dining'); 
var $container = $('#events'); 
var $container = $('#climbing'); 
var $container = $('#wildlife'); 

를 플러그인을 시작하는 chainablilty를 해결하기 위해 바로 할이

$('#wildlife, #climbing , ... ,#container).masonry({ .. 

그러나이 경우에는 하시다 같은

class="MasoniseThis otherClasses" 
... 
$('.MasoniseThis').masonry({ .. 

으로 그리고 각 그것의 해당 클래스로 보이는 div의에 플러그인을 적용해야 pageload에 누구와도 바꿀 수없는 다이애나 클래스 이름을 전환하는 것이 더 쉬울 수 ULD.

JSFiddle에서 일부 마크 업 예제가 없으면 더 이상 도움을 줄 수 없습니다.