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>

文本“默认可见内容”是默认情况下在图块中显示的内容（duh）。 <div id="tileID_flipped" class="hiddenContent">内的内容是翻转图块时显示的内容。

我在$(document).ready(function() {中使用以下JavaScript来使每个磁贴翻转工作：

$('#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

将选择器存储在一个数组中并循环遍历它们。如果其他东西发生了变化，除了选择器之外，我也为它创建了一个对象。

(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'),
        ...

如何将内容与jQuery Flip动画的每个实现分开？

2 个答案: