Question

我正在尝试为学校项目制作一个研究网络应用程序的闪存卡，我想使用Flip!我有一个问题，但是当我把锚点与他们的点击事件绑定到翻译功能里面时要翻转的div。我是jQuery的新手。任何帮助，将不胜感激。有翻转论坛吗？我的代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Flippant</title>
  <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
    //<![CDATA[    
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.2");
    //]]>
  </script>
  <script type="text/javascript" src="jquery.flip.js"></script>
  <script type="text/javascript">
  var f2b = function(){
    $("#card").flip({
      direction: 'tb',
      color: '#B34212',
      content: $('#back')
    });
  }

  var b2f = function(){
    $("#card").flip({
      direction: 'tb',
      color: '#B34212',
      content: $('#front')
    });
  }
  $(document).ready(function(){
    $("#flip1").click(f2b);
    $("#flip2").click(b2f);
    $("#flip2").click();
  });
  </script>
  <style type="text/css">
  .back { display: none; }
  .front { display: none; }
  </style>
</head>
<body>
  <div class="card" id="card"></div>
  <div class="front" id="front">
    This is <br />
    the front <br />
    of the card. <br />
    <a href="#" id="flip1" title="flip to back">Flip1</a>
  </div>
  <div class="back" id="back">
    This is<br />
    the back<br />
    of the card.<br /> 
    <a href="#" id="flip2" title="flip to front">Flip2</a>
  </div>
</body>
</html>

Answer 1

翻转插件似乎会破坏您在文档准备就绪时设置的事件处理程序。解决方法是使用live event binding。将文档就绪功能更改为：

$("#flip1").live('click', f2b);
$("#flip2").live('click', b2f);
$("#flip2").trigger('click');

编辑：我还应该提一下，除非你在CSS中指定了宽度，否则初始动画似乎不会触发，如下所示：

.card { height: 200px; width:200px; }

jQuery翻转！点击div内的事件

1 个答案: