jQuery：この機能を実行するために新しい "ボタン"を作る方法

"ボタン"と呼ばれる新しいスパンクラスを作りたいと思います。「ボタン」をクリックすると、jQueryが実行され、「ボタン」ではなく.frontが反転します。私は試しました：$('.button').bind("click",function() {しかし、それは.frontではなくボタンにのみ影響します。jQuery：この機能を実行するために新しい "ボタン"を作る方法

HTML：

<span class="button">Run!</span>

のjQuery：

$(document).ready(function(){ 

    $('.front').bind("click",function() { 

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

     // data('flipped') is a flag we set when we flip the element: 
     if(elem.data('flipped')) 
     { 
      // If the element has already been flipped, use the revertFlip method 
      elem.revertFlip(); 

      // Unsetting the flag: 
      elem.data('flipped',false) 
     } 
     else 
     { 
      // Using the flip method defined by the plugin: 

      elem.flip({ 
       direction:'tb', 
       speed: 350, 
       onBefore: function(){ 
        // Insert the contents of the .back div (hidden from view with display:none) 
        // into the clicked .front div before the flipping animation starts: 

        elem.html(elem.siblings('.back').html()); 
       } 
      }); 

      // Setting the flag: 
      elem.data('flipped',true); 
     } 
    }); 

});

出典

2011-07-12 Juho Tikkanen

あなたは、例えば、あなたがあなたの関数で操作したい要素に対処し、その後、ボタンにイベントを添付する必要があります

$(".button").click(function(){ 

    var elem = $('.front'); 
    …

UPDATE：完全なページの例（明らかにあなたは、おそらく外部ファイルでの.jsや.cssのを置く、これは単なるデモである）、これはあなたがやりたいのか？そうでない場合、理由と方法：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"> 
</script> 
    <script src="jquery.flip.min.js" type="text/javascript"> 
</script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 

     $(".button").live('click', function() { 

      // $(this) point to the clicked .front element (caching it in elem for speed): 
      var elem = $('.front'); 
      console.log(elem.data('flipped')); 
      // data('flipped') is a flag we set when we flip the element: 
      if (elem.data('flipped')) 
      { 
       // If the element has already been flipped, use the revertFlip method 
       elem.revertFlip(); 

       // Unsetting the flag: 
       elem.data('flipped', false) 
      } 
      else 
      { 
       // Using the flip method defined by the plugin: 
       elem.flip({ 
        direction: 'tb', 
        speed: 350, 
        onBefore: function() { 
         // Insert the contents of the .back div (hidden from view with display:none) 
         // into the clicked .front div before the flipping animation starts: 
         elem.html(elem.siblings('.back').html()); 
        } 
       }); 

       // Setting the flag: 
       elem.data('flipped', true); 
      } 
     }); 

    }); 
    </script> 
    <style type="text/css" media="screen"> 
    .front 
    { 
    width: 400px; 
    height: 300px; 
    background-color: red; 
    } 

    .back 
    { 
    display: none; 
    } 

    .button 
    { 
    display: block; 
    border: 1px solid black; 
    width: 50px; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="front"> 
     <span class="button">Run!</span> 
     <p> 
     Hello World! 
     </p> 
    </div> 
    <div class="back"> 
     <span class="button">Run!</span> 
     <p> 
     I am back 
     </p> 
    </div> 
    </body> 
</html>

出典

2011-07-12 09:42:14

ありがとう！これを試しましたが、elem.revertFlip（）;その後は機能しません。 –

OK、上記を更新しました。あなたがしようとしていることについてもう少し説明できますか？ –

私は '実行します。 'を反転させます。「

Hello World!
Run!

I am back
Run!

–

jQuery：この機能を実行するために新しい "ボタン"を作る方法

答えて

関連する問題