jQuery：如何制作新的“按鈕”來運行這個 function

Question

我想制作一個名為“按鈕”的新跨度 class 。 單擊“按鈕”時，它應該運行 jQuery 並翻轉.front而不是“按鈕”。 我試過： $('.button').bind("click",function() {但它只影響按鈕，而不是.front 。

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

});

Answer 1

您需要將事件附加到按鈕，然后在 function 中處理您希望操作的元素，例如

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

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

更新：完整頁面的示例（顯然您可能會將.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>

jQuery：如何制作新的“按鈕”來運行這個 function

問題描述

1 個解決方案

解決方案1
1 已采納 2011-07-12 09:42:14

jQuery：如何制作新的“按鈕”來運行這個 function

問題描述

1 個解決方案

解決方案1 1 已采納 2011-07-12 09:42:14

解決方案1
1 已采納 2011-07-12 09:42:14