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>

「デフォルトの可視コンテンツ」というテキストは、デフォルトでタイル内に表示されるものです（当然）。中のコンテンツ<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)。

次のコードを使用して、クラス「タイル」を持つすべての要素に反転イベントを適用できました。

$('.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 フリップを使用しています。

4

2 に答える 2

0

Grab the content the same way you would anything else, traverse there from the context of your function.

        ...
        content: $(this).find('.hiddenContent'),
        ...
于 2011-10-18T19:21:44.727 に答える
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 に答える