0

我正在创建一个使用 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">是在翻转磁贴时显示的内容。

我正在使用以下 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).

我能够使用以下代码将翻转事件应用于具有“tile”类的每个元素：

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

既然我已经这样做了，我如何将特定于图块的内容“注入”到每个图块中？

PS 我正在使用 jQuery (1.6.4)、jQuery UI (1.7.2) 和 jQuery Flip。

4

2 回答 2

0

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

(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 进行迭代，因为无论如何每次迭代都需要一个闭包。

于 2011-10-18T19:16:42.217 回答
0

以与其他任何方式相同的方式获取内容，从函数的上下文中遍历。

        ...
        content: $(this).find('.hiddenContent'),
        ...
于 2011-10-18T19:21:44.727 回答