Как мне отделить контент от каждой реализации моей анимации jQuery Flip?

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"> - это то, что отображается при переворачивании плитки.

Я использую следующий JavaScript в $(document).ready(function() {, чтобы заставить каждую плитку переворачиваться:

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

К вашему сведению, я использую решение e.stopImmediatePropagation(), чтобы предотвратить срабатывание события переворачивания, когда пользователь щелкает ссылку в плитке. Нашел это решение на этом сайте.

Проблема в том, что я повторяю этот скрипт для каждой плитки, которую я создаю. Я чувствую, что это расточительно, потому что единственный уникальный атрибут - content: $(selector).

Мне удалось применить событие flip к каждому элементу класса "tile", используя следующий код:

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

Теперь, когда я это сделал, как мне «внедрить» контент, относящийся к плитке, в каждую плитку?

P.S. Я использую jQuery (1.6.4), jQuery UI (1.7.2) и jQuery flip.

Answer 1

Захватите содержимое так же, как и все остальное, перейдя туда из контекста вашей функции.

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

Answer 2

Сохраните селекторы в массиве и зациклите их.Если что-то еще изменится, кроме селектора, я для этого тоже создал объект.

(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 для итерации, так как в любом случае для каждой итерации необходимо закрытие.