Question

我的jquery插件有一个名为quikflip的问题。基本上，插件翻转图像具有翻转效果，如转动卡片。我正在使用它来翻转我有20张卡的卡片图像列表，它工作正常，但我想只翻转3张卡片并停止显示警报并转到下一个网址。

我是jquery的新手并且不知道如何制作它，我试图反击但没有成功。

这是我试过的：

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每次点击卡我不会kenow如果它干扰我的代码发送信息：

 <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

希望这有帮助。

quik翻转插件的jquery问题

1 个答案: