How do I separate the content from each implementation of my jQuery Flip animation?

Question

I'm creating a mosaic tile wall that uses the jQuery plugin Flip! (http://lab.smashup.it/flip/) to expose more content on each tile. I'm not a JavaScript or jQuery guru, but I have it working perfectly in IE7+, FF, Chrome and Safari (pats self on back). However, I know it could be done with less JS, and I'd like to understand how.

I'm constructing each tile using the following markup:

<li id="tileID" class="tile">Default visible content
  <div id="tileID_flipped" class="hiddenContent">
    Content made visible when tile flips.
  </div>
</li>

The text "Default visible content" is what shows up within the tile on default (duh). The content within <div id="tileID_flipped" class="hiddenContent"> is what shows up when the tile has been flipped.

I'm using the following JavaScript within $(document).ready(function() { to make each tile flip work:

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

FYI, I'm using the e.stopImmediatePropagation() solution to prevent the flip event from being triggered when the user clicks on a link within the tile. Found that solution on this site.

The problem is that I repeat this script for every tile I create. I feel this is wasteful because the only unique attribute is content: $(selector).

I was able to apply the flip event to every element with the class "tile" using the following code:

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

Now that I've done this, how do I "inject" the tile-specific content into each tile?

P.S. I'm using jQuery (1.6.4), jQuery UI (1.7.2) and jQuery flip.

Answer 1

Store the selectors in an array and loop over them. If something else changes, other than the selector, I have created an object for that too.

(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()
            }
        );
    }
);

})()

I am using $.each to iterate since a closure is needed for every iteration anyway.

Answer 2

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

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