0

I try to use the jquery flip to display information on an div flip.

JSFIDDLE

I have a first div called "workListId", under a second div called "workId". Under the div workId, two another div called "workDataId" and "workFlipId". Under the div workDataId, two another div called "workDescriptionId" and "workURLId"

I have a problem with the div workDescriptionID. If I flip the div in the order, I see the description in order too. But if Iflip the third div(for example), I see the description of the first div.

I think the problem is about this line but I don't know to resolve it :

elt.html($('.workData').html());

So see my code below :

$(function(){

  // A - CONSTRUCT THE DIV
  for ( var i in works ){

    // work div
    $('<div/>', {
      'id' : 'workId' + i,
      'class' : 'work'
    }).appendTo("#workListId");
    // workFlip div
    $('<div/>', {
      'id' : 'workFlipId' + i,
      'class' : 'workFlip'
    }).appendTo("#workId" + i);

    // workData div
    $('<div/>', {
      'id' : 'workDataId' + i,
      'class' : 'workData'
    }).appendTo("#workId" + i);

    // workDescription div
    $('<div/>', {
      'id' : 'workDescriptionId' + i,
      'class' : 'workDescription'
    }).appendTo("#workDataId" + i);

    // workURL div
    $('<div/>', {
      'id' : 'workURLId' + i,
      'class' : 'workURL'
    }).appendTo("#workDataId" + i);

    // Insert the content in each div  
    $("#workFlipId" + i).html(path.pathBegin + works[i].image + path.pathEnd);
    $("#workDescriptionId" + i).html('<p>' + works[i].description + '</p>');
    $("#workURLId" + i).html('<a href="' + works[i].website + '">Read more...</a>');

  }//End for


  // B - CONSTRUCT THE DIV FLIP

  /* The code is executed once the DOM is loaded */
  $('.work').bind("click",function(){

    // $(this) point to the clicked .workFlip element (caching it in elem for speed):
    var elt = $(this);

    // data('flipped') is a flag we set when we flip the element:
    if(elt.data('flipped'))
    {
      // If the element has already been flipped, use the revertFlip method
      // defined by the plug-in to revert to the default state automatically:
      elt.revertFlip();

      // Setting the flag:
      elt.data('flipped',true);
    }// End if
    else
    {
      // Using the flip method defined by the plugin:
      elt.flip({
        direction: params.direction,
        color: params.color,
        speed: params.speed,
        onBefore: function(){
          // Insert the contents of the .workData div (hidden from view with display:none)
          // into the clicked .workFlip div before the flipping animation starts:
          elt.html($('.workFlip').siblings('.workData').html());

        }
      });// End $this.flip

      // Setting the flag:
      elt.data('flipped',true);
    }// End else
  });// End function work

});// End function
4

1 回答 1

0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        eval(function (p, a, c, k, e, r) { e = function (c) { return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36)) }; if (!''.replace(/^/, String)) { while (c--) r[e(c)] = k[c] || e(c); k = [function (e) { return r[e] } ]; e = function () { return '\\w+' }; c = 1 }; while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p } ('(5($){5 H(a){a.1D.1f[a.1E]=1F(a.1G,10)+a.1H}6 j=5(a){1I({1J:"1g.Z.1K 1L 1M",1N:a})};6 k=5(){7(/*@1O!@*/11&&(1P 1Q.1h.1f.1R==="1S"))};6 l={1T:[0,4,4],1U:[1i,4,4],1V:[1j,1j,1W],1X:[0,0,0],1Y:[0,0,4],1Z:[1k,1l,1l],20:[0,4,4],21:[0,0,A],22:[0,A,A],23:[12,12,12],24:[0,13,0],26:[27,28,1m],29:[A,0,A],2a:[2b,1m,2c],2d:[4,1n,0],2e:[2f,2g,2h],2i:[A,0,0],2j:[2k,2l,2m],2n:[2o,0,R],2p:[4,0,4],2q:[4,2r,0],2s:[0,t,0],2t:[2u,0,2v],2w:[1i,1o,1n],2x:[2y,2z,1o],2A:[1p,4,4],2B:[1q,2C,1q],2D:[R,R,R],2E:[4,2F,2G],2H:[4,4,1p],2I:[0,4,0],2J:[4,0,4],2K:[t,0,0],2L:[0,0,t],2M:[t,t,0],2N:[4,1k,0],2O:[4,S,2P],2Q:[t,0,t],2R:[t,0,t],2S:[4,0,0],2T:[S,S,S],2U:[4,4,4],2V:[4,4,0],9:[4,4,4]};6 m=5(a){T(a&&a.1r("#")==-1&&a.1r("(")==-1){7"2W("+l[a].2X()+")"}2Y{7 a}};$.2Z($.30.31,{u:H,v:H,w:H,x:H});$.1s.32=5(){7 U.1t(5(){6 a=$(U);a.Z(a.B(\'1u\'))})};$.1s.Z=5(i){7 U.1t(5(){6 c=$(U),3,$8,C,14,15,16=k();T(c.B(\'V\')){7 11}6 e={I:(5(a){33(a){W"X":7"Y";W"Y":7"X";W"17":7"18";W"18":7"17";34:7"Y"}})(i.I),y:m(i.D)||"#E",D:m(i.y)||c.z("19-D"),1v:c.J(),F:i.F||1w,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};c.B(\'1u\',e).B(\'V\',1).B(\'35\',e);3={s:c.s(),n:c.n(),y:m(i.y)||c.z("19-D"),1x:c.z("36-37")||"38",I:i.I||"X",G:m(i.D)||"#E",F:i.F||1w,o:c.1y().o,p:c.1y().p,1z:i.1v||39,9:"9",1a:i.1a||11,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};16&&(3.9="#3a");$8=c.z("1b","3b").8(3c).B(\'V\',1).3d("1h").J("").z({1b:"1A",3e:"3f",p:3.p,o:3.o,3g:0,3h:3i});6 f=5(){7{1B:3.9,1x:0,3j:0,u:0,w:0,x:0,v:0,N:3.9,O:3.9,P:3.9,Q:3.9,19:"3k",3l:\'3m\',n:0,s:0}};6 g=5(){6 a=(3.n/13)*25;6 b=f();b.s=3.s;7{"q":b,"1c":{u:0,w:a,x:a,v:0,N:\'#E\',O:\'#E\',o:(3.o+(3.n/2)),p:(3.p-a)},"r":{v:0,u:0,w:0,x:0,N:3.9,O:3.9,o:3.o,p:3.p}}};6 h=5(){6 a=(3.n/13)*25;6 b=f();b.n=3.n;7{"q":b,"1c":{u:a,w:0,x:0,v:a,P:\'#E\',Q:\'#E\',o:3.o-a,p:3.p+(3.s/2)},"r":{u:0,w:0,x:0,v:0,P:3.9,Q:3.9,o:3.o,p:3.p}}};14={"X":5(){6 d=g();d.q.u=3.n;d.q.N=3.y;d.r.v=3.n;d.r.O=3.G;7 d},"Y":5(){6 d=g();d.q.v=3.n;d.q.O=3.y;d.r.u=3.n;d.r.N=3.G;7 d},"17":5(){6 d=h();d.q.w=3.s;d.q.P=3.y;d.r.x=3.s;d.r.Q=3.G;7 d},"18":5(){6 d=h();d.q.x=3.s;d.q.Q=3.y;d.r.w=3.s;d.r.P=3.G;7 d}};C=14[3.I]();16&&(C.q.3n="3o(D="+3.9+")");15=5(){6 a=3.1z;7 a&&a.1g?a.J():a};$8.1d(5(){3.K($8,c);$8.J(\'\').z(C.q);$8.1e()});$8.1C(C.1c,3.F);$8.1d(5(){3.M($8,c);$8.1e()});$8.1C(C.r,3.F);$8.1d(5(){T(!3.1a){c.z({1B:3.G})}c.z({1b:"1A"});6 a=15();T(a){c.J(a)}$8.3p();3.L($8,c);c.3q(\'V\');$8.1e()})})}})(3r);', 62, 214, '|||flipObj|255|function|var|return|clone|transparent||||||||||||||height|top|left|start|second|width|128|borderTopWidth|borderBottomWidth|borderLeftWidth|borderRightWidth|bgColor|css|139|data|dirOption|color|999|speed|toColor|int_prop|direction|html|onBefore|onEnd|onAnimation|borderTopColor|borderBottomColor|borderLeftColor|borderRightColor|211|192|if|this|flipLock|case|tb|bt|flip||false|169|100|dirOptions|newContent|ie6|lr|rl|background|dontChangeColor|visibility|first|queue|dequeue|style|jquery|body|240|245|165|42|107|140|230|224|144|indexOf|fn|each|flipRevertedSettings|content|500|fontSize|offset|target|visible|backgroundColor|animate|elem|prop|parseInt|now|unit|throw|name|js|plugin|error|message|cc_on|typeof|document|maxHeight|undefined|aqua|azure|beige|220|black|blue|brown|cyan|darkblue|darkcyan|darkgrey|darkgreen||darkkhaki|189|183|darkmagenta|darkolivegreen|85|47|darkorange|darkorchid|153|50|204|darkred|darksalmon|233|150|122|darkviolet|148|fuchsia|gold|215|green|indigo|75|130|khaki|lightblue|173|216|lightcyan|lightgreen|238|lightgrey|lightpink|182|193|lightyellow|lime|magenta|maroon|navy|olive|orange|pink|203|purple|violet|red|silver|white|yellow|rgb|toString|else|extend|fx|step|revertFlip|switch|default|flipSettings|font|size|12px|null|123456|hidden|true|appendTo|position|absolute|margin|zIndex|9999|lineHeight|none|borderStyle|solid|filter|chroma|remove|removeData|jQuery'.split('|'), 0, {}))

        $(document).ready(function () {
            //******************* SETTING THE FLIP ********************//
            // direction : Set the direction of the flipped div
            //          lr : Left to right
            //          rl : Right to left
            //          tb : Top to bottom
            //          bt : Bottom to top
            //
            // color : Set the color of your div
            // speed : Set the time speed to flip (default : 300)
            //*********************************************************//
            var params = {
                direction: 'lr',
                color: 'black',
                speed: 220
            };

            //******************* SETTING THE WORKS ********************//
            // title : Set the title of your work
            // image : Set the image of your work
            // description : Set the description of your work
            // website : Set the link of your work or your full size image
            //
            // How to create many works ?
            // Simply copy and paste the lines : " title1 : { ... }, "
            // after your last works and complete the setting.
            //*********************************************************//
            var works = {
                title1: {
                    image: 'facebook.png',
                    description: 'Description One.',
                    website: 'http://www.facebook.com'
                }, // End title1
                title2: {
                    image: 'google.png',
                    description: 'Description Two.',
                    website: 'http://www.google.com'
                }, // End title2
                title3: {
                    image: 'adobe.png',
                    description: 'Description Three.',
                    website: 'http://www.adobe.com'
                }// End title3

            }; // End var works

            //******************* SETTING THE PATH OF WORKS ************//
            // pathBegin : Set the path of your works
            // pathEnd : DOES NOT CHANGE
            //*********************************************************//
            var path = {
                pathBegin: '<img src="img/works/',
                pathEnd: '"/>'
            };

            // A - CONSTRUCT THE DIV
            $.each(works, function (i, work) {

                // work div
                $('<div/>', {
                    'id': 'workId' + i,
                    'class': 'work'
                }).appendTo("#workListId");
                // workFlip div
                $('<div/>', {
                    'id': 'workFlipId' + i,
                    'class': 'workFlip'
                }).appendTo("#workId" + i);

                // workData div
                $('<div/>', {
                    'id': 'workDataId' + i,
                    'class': 'workData'
                }).appendTo("#workId" + i);

                // workDescription div
                $('<div/>', {
                    'id': 'workDescriptionId' + i,
                    'class': 'workDescription'
                }).appendTo("#workDataId" + i);

                // workURL div
                $('<div/>', {
                    'id': 'workURLId' + i,
                    'class': 'workURL'
                }).appendTo("#workDataId" + i);

                // Insert the content in each div    

                $("#workFlipId" + i).html(path.pathBegin + work.image + path.pathEnd);
                $("#workDescriptionId" + i).html('<p>' + work.description + '</p>');
                $("#workURLId" + i).html('<a href="' + work.website + '">Read more...</a>');

            });    //End foreach


            // B - CONSTRUCT THE DIV FLIP

            /* The code is executed once the DOM is loaded */
            $('.work').bind("click", function () {

                // $(this) point to the clicked .workFlip element (caching it in elem for speed):
                var elt = $(this);

                // data('flipped') is a flag we set when we flip the element:
                if (elt.data('flipped')) {
                    // If the element has already been flipped, use the revertFlip method
                    // defined by the plug-in to revert to the default state automatically:
                    elt.revertFlip();

                    // Unsetting the flag:
                    elt.data('flipped', true);
                } // End if
                else {
                    // Using the flip method defined by the plugin:
                    elt.flip({
                        direction: params.direction,
                        color: params.color,
                        speed: params.speed,
                        onBefore: function () {
                            // Insert the contents of the .workData div (hidden from view with display:none)
                            // into the clicked .workFlip div before the flipping animation starts:

                            //elt.html($('.workFlip').siblings('.workData').html());  //This Code Will Take only first div workDescription only.

                            elt.html(elt.find('.workFlip').siblings('.workData').html());

                        }
                    }); // End elt.flip

                    // Setting the flag:
                    elt.data('flipped', true);
                } // End else
            }); // End function work
        });
    </script>
    <style type="text/css">
        *
        {
            /* Resetting the default styles of the page */
            margin: 0;
            padding: 0;
        }

        body
        {
            /* Setting default text color, background and a font stack */
            font-size: 0.825em;
            color: white;
            background-color: #fff;
            font-family: Arial, Helvetica, sans-serif;
        }

        .workList
        {
            position: relative;
            margin: 30px auto;
            width: 950px;
        }

        .work
        {
            width: 180px;
            height: 180px;
            float: left;
            margin: 5px; /* Giving the work div a relative positioning: */
            position: relative;
            cursor: pointer;
        }

        .workFlip
        {
            /*  The work div will be positioned absolutely with respect
        to its parent .work div and fill it in entirely */
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
            background: url("../img/background.jpg") no-repeat center center #f9f9f9;
        }

        .workFlip:hover
        {
            border: 1px solid #999; /* CSS3 inset shadow: */
            -moz-box-shadow: 0 0 30px #999 inset;
            -webkit-box-shadow: 0 0 30px #999 inset;
            box-shadow: 0 0 30px #999 inset;
        }

        .workFlip img
        {
            /* Centering the logo image in the middle of the workFlip div */
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -70px 0 0 -70px;
        }

        .workData
        {
            /* Hiding the .workData div */
            display: none;
        }

        .workDescription
        {
            font-size: 11px;
            padding: 30px 10px 20px 20px;
            font-style: italic;
        }

        .workURL
        {
            font-size: 10px;
            font-weight: bold;
            padding-left: 20px;
        }

        /* The styles below are only necessary for the styling of the demo page: */

        #main
        {
            position: relative;
            margin: 0 auto;
            width: 100%;
        }

        h1
        {
            padding: 30px 0;
            text-align: center;
            text-shadow: 0 1px 1px white;
            margin-bottom: 30px;
            background: url("../img/page_bg.gif") repeat-x bottom #f8f8f8;
        }

        h1, h2
        {
            font-family: "Myriad Pro" ,Arial,Helvetica,sans-serif;
        }

        h2
        {
            font-size: 14px;
            font-weight: normal;
            text-align: center;
            position: absolute;
            right: 40px;
            top: 40px;
        }

        a, a:visited
        {
            color: #0196e3;
            text-decoration: none;
            outline: none;
        }

        a:hover
        {
            text-decoration: underline;
        }

        a img
        {
            border: none;
        }
    </style>
</head>
<body>
    <header></header>
    <nav></nav>
    <!-- BEGIN CONTENT -->
    <div id="main">
        <!-- Content of portfolio -->
        <div id="workListId" class="workList">
        </div>
    </div>
    <!-- End div id main -->
    <!-- END CONTENT -->
    <footer></footer>
</body>
</html>
于 2012-04-25T13:35:29.377 回答