Javascript jQuery：如何创建新的；按钮“；要运行此函数_Javascript_Jquery

Javascript jQuery：如何创建新的；按钮“；要运行此函数

javascript jquery

Javascript jQuery：如何创建新的；按钮“；要运行此函数,javascript,jquery,Javascript,Jquery,我想创建一个名为“button”的新span类。单击“按钮”时，它应该运行jQuery并翻转.front而不是“按钮”。我尝试了：$（'.button'）.bind（“单击”，function（）{），但它只影响按钮，而不影响.front HTML: 您需要将事件附加到按钮，然后处理您希望在函数中操作的元素，例如 $(".button").click(function(){ var elem = $('.front'); … 更新：完整页面的示例（显然您可能会将.js和.css放在外

我想创建一个名为“button”的新span类。单击“按钮”时，它应该运行jQuery并翻转

.front

而不是“按钮”。我尝试了：

$（'.button'）.bind（“单击”，function（）{

），但它只影响按钮，而不影响

.front

HTML:

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

$(".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>


$（文档）.ready（函数（）{
$（“.button”）.live（'单击'，函数（））{
//$（这）指向单击的.front元素（将其缓存在elem中以提高速度）：
变量元素=$（'.front'）；
console.log（元素数据（'fliped'））；
//数据（“翻转”）是翻转元素时设置的标志：
if（元素数据（‘翻转’）
{
//如果图元已翻转，请使用revertFlip方法
元素revertFlip（）；
//取消设置旗帜：
元素数据（“翻转”，错误）
}
其他的
{
//使用插件定义的翻转方法：
元素翻转({
方向:"结核病",，
速度：350，
onBefore:function（）{
//插入.back div的内容（隐藏显示：无）
//在翻转动画开始之前进入单击的.front div：
html（elem.sibbins（'.back'）.html（））；
}
});
//设置标志：
要素数据（“翻转”，真）；
}
});
});
.前线
{
宽度：400px；
高度：300px；
背景色：红色；
}
返回
{
显示：无；
}
按钮
{
显示：块；
边框：1px纯黑；
宽度：50px；
}
跑

你好，世界！

跑

我回来了

谢谢！尝试了此操作，但elem.revertFlip（）；然后就不起作用了。好的，上面已经更新了，你能解释一下你想做什么吗。我想在翻动div时

运行！

。比如：

你好，世界！
运行！
我回来了
运行！

当这样做时，第一次翻动是有效的，但之后它就不起作用了返回到“Hello World”div.Ah！我已经更新了上面的示例，使用-$（“.button”）.live（'click'，function（）{-think/hope这就是您想要的：）

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

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

<!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>