Question

我想创建一个名为“button”的新span类。单击“按钮”时，它应该运行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

您需要将事件附加到按钮，然后在您的函数中处理您希望操作的元素，例如

$(".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：如何创建新的“按钮”来运行此功能

1 个答案: