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（）;然後不起作用。 –

好的，上面已經更新了，你能解釋一下你想做什麼嗎？ –

我想'運行！'在翻轉divs。例如：'

Hello World!
Run!

I am back
Run!

' –

jQuery：如何使新的「按鈕」運行此功能

回答

相關問題