내 jQuery 플립 애니메이션의 각 구현에서 콘텐츠를 어떻게 분리합니까?

Question

jQuery 플러그인을 사용하는 모자이크 타일 벽을 만들고 있어요. Flip! (http://lab.smashup.it/flip/)를 사용하여 각 타일에 더 많은 내용을 표시하십시오. 저는 JavaScript 또는 jQuery 전문가는 아니지만 IE7 +, FF, Chrome 및 Safari에서 완벽하게 작동합니다 (뒷면에 자기가 있음). 그러나, 나는 그것이 적은 JS로 할 수 있다는 것을 알고 있으며, 어떻게 이해하고 싶습니다.

나는 다음과 같은 마크 업을 사용하여 각 타일을 구성하고 있습니다 :

<li id="tileID" class="tile">Default visible content 
    <div id="tileID_flipped" class="hiddenContent"> 
    Content made visible when tile flips. 
    </div> 
</li> 

텍스트는 "눈에 보이는 내용을 기본 것은"기본 (대만족)에 타일 내에 보여줍니다 것입니다. <div id="tileID_flipped" class="hiddenContent">의 콘텐츠가 타일을 뒤집을 때 표시됩니다. 나는 사용자가 클릭 할 때 트리거되는 플립 이벤트를 방지하기 위해 e.stopImmediatePropagation() 솔루션을 사용하고 참고

$('#tileID').delegate('a', 'click', function(e){ e.stopImmediatePropagation(); }) 
.toggle(function(){ 
     $(this).flip({ 
     direction:'rl', 
     color: "#b91317", 
     content: $("#tileID_flipped"), 
     speed: 200 
     }) 
    }, 
    function() { 
     $(this).revertFlip() 
    } 
); 

: 나는 각 타일 플립 작동하도록 $(document).ready(function() { 내에서 다음과 같은 자바 스크립트를 사용하고

타일 ​​안에있는 링크. 해당 사이트에서 해당 솔루션을 찾았습니다.

문제는 제가 만든 모든 타일에 대해이 스크립트를 반복한다는 것입니다. 유일무이 한 속성이 content: $(selector)이기 때문에 이것이 낭비라고 생각합니다.

내가 다음 코드를 사용하여 클래스 "타일"과 모든 요소에 플립 이벤트를 적용 할 수 있었다 : 지금이 작업을 완료했다고

$('.tile').delegate('a', 'click', function(e){ e.stopImmediatePropagation(); }) 
.toggle(function(){ 
    $(this).flip({ 
     direction:'rl', 
     color: "#b91317", 
     speed: 200 
    }) 
}, 
function() { 
    $(this).revertFlip() 
} 
); 

을, 내가 어떻게 tile-를 "주입"할 특정 내용을 각 타일에 저장 하시겠습니까?

P. jQuery (1.6.4), jQuery UI (1.7.2) 및 jQuery 플립을 사용하고 있습니다.

Answer 1

선택기를 배열에 저장하고 반복합니다. 선택자 이외의 다른 항목이 변경되면 그에 대한 객체도 생성됩니다.

(function(){ 
var selectors = "#tileID #someAnotherID #thirdID".split(" "); 

var selectorData = { 

    "#tileID": { 

    //Data concerning #tileID 
    }, 

    "#someAnotherID": { 

    }, 

    "#thirdID": { 


    } 
}; 

$.each(selectors, 
    function(index, selector){ 
    var data = selectorData[selector]; 

     $(selector).delegate('a', 'click', function(e){ e.stopImmediatePropagation(); }) 
     .toggle(function(){ 
      $(this).flip({ 
      direction:'rl', 
      color: "#b91317", // could be data.color and so on 
      content: $(selector+"_flipped"), 
      speed: 200 
      }) 
      }, 
      function() { 
      $(this).revertFlip() 
      } 
     ); 
    } 
); 

})() 

어쨌든 모든 반복마다 닫힘이 필요하므로 반복하려면 $ .each를 사용하고 있습니다.

Answer 2

다른 방법과 동일한 방식으로 콘텐츠를 가져 와서 함수 컨텍스트에서 트래버스합니다.

 ... 
     content: $(this).find('.hiddenContent'), 
     ...