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

Я создаю стену из мозаичной плитки, используя плагин 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').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.


jquery flip mosaic tile tiles
person Mason    schedule 18.10.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

person Esailija    schedule 18.10.2011
comment
Как прелесть, спасибо! Я бы проголосовал, но у меня недостаточно репутации. - person Mason; 18.10.2011

arrow_upward
0
arrow_downward

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

        ...
        content: $(this).find('.hiddenContent'),
        ...
person Sinetheta    schedule 18.10.2011