quik Flip插件的jQuery问题

Question

我对名为 quikflip 的 jquery 插件有疑问。基本上，该插件会翻转具有翻转效果的图像，例如翻牌。我正在使用它来翻转我有 20 张卡片的卡片图像列表，它运行良好，但我只想翻转 3 张卡片并停止显示警报并转到下一个网址。

我是 jquery 的新手，不知道如何制作，我尝试制作 counter 但没有成功。

这是我尝试过的：

function count() {
  var n = $('quickFlip').length;
  if(n > 3){
   Alert('only 3' );
  }
  else {
   $('.quickFlip').quickFlip();
  //
  }
}

$('.quickFlip').click(countChecked);

插件的功能是这样调用的：

$(function() {
    $('.quickflip').quickFlip();
});

插件的代码在这里http://jonraasch.com/blog/quickflip-2-jquery-plugin。

我刚刚完全复制了代码，没有显示任何警报。我有另一个脚本，每次单击时都会发送带有 div 的 ajax id 的卡，我不知道它是否干扰了我发送信息的代码：

 <script> $(document).ready(function(){ $(".element").click(function () {


    var cururl = document.location.href;
     var path = $(this).attr('title') ; 
    var cardid = $(this).attr('id') ;
     $.get('ajaxprocess.php', {Path: path,url: cururl,cardid:cardid}, function(data){ 

    $('#test').text(data);});
    });
    }); 
    </script>

元素就像是

<div class="quickFlip"> <div class="element" id= "id" title ="title">
<a href="#" class="quickFlipCta"> </a>
</div>
 the code for fliping is now like
 <script type="text/javascript">
 $(function() { $('.quickflip').quickFlip(); }); 
$(function() { 
var timesFlipped = 0; 
var threshold = 3; $('.quickflip').quickFlip().click(function() {
 if(timeFlipped++ >= threshold) { alert("Redirecting"); // do more stuff }});
}); 
</script>

我做错了什么？

Answer 1

在没有查看插件代码的情况下，我认为最简单的解决方案是将另一个.click() 事件绑定到您的$('.quickflip')，跟踪用户“翻转”了多少次，并在 n 数量。喜欢：

$(function() {

   var timesFlipped = 0;
   var threshold = 3;

   $('.quickFlip').quickFlip().find('.quickFlipCta').click(function() {
         if(++timesFlipped >= threshold) {
            alert("Redirecting");
            // do more stuff
         }
      });
});

基本工作示例：http://jsfiddle.net/sMYzS/8/

更多信息：

$('.quickFlip').quickFlip(); 实际上似乎并没有进行翻转，它只是设置了翻转功能（将事件绑定到您的容器等）。所以你的

else {
   $('.quickFlip').quickFlip();
}

似乎是错误的方法。基本上当你的函数被调用时你在做什么是

if there are more than 3
   alert something
else 
   initialize the quickflip functionality

希望这会有所帮助。