Question

我正在使用this flip plugin，请参阅this fiddle中的代码。目标是一次翻转一个盒子，例如单击的第二个框应该revertFlip()前一个框。在动画期间，我不希望其他框可以点击。我注意到removeClass()无效。

<div class='flippable'>I'm unflipped 1</div> 
...
<div class='flippable'>I'm unflipped 9</div>

$('.flippable:not(.reverted)').live('click',function()
    {
        var $this = $(this);
        var $prevFlip = $('.reverted'); 
        var $allBoxes = $('.flippable');      

        $this.flip(
        {
            direction: 'lr',
            color: '#82BD2E',
            content: 'now flipped',
            onBefore: function()
            { 
                $prevFlip.revertFlip();
                $prevFlip.removeClass('reverted'); 
            },
            onAnimation: function () 
            { 
                $allBoxes.preventDefault();
            },
            onEnd: function()
            { 
                $this.addClass('reverted');
            }
         })
    return false;
    });

我非常感谢你的建议和建议。

编辑：
错误控制台输出： $allBoxes.preventDefault is not a function

Answer 1

我认为这与revertFlip()调用onBefore和onEnd有关。这会导致addClass和removeClass出现一些奇怪现象。查看我修改过的示例：http://jsfiddle.net/andrewwhitaker/7cysr/。

你会看到你打开FireBug多次调用onBefore和onEnd，我认为具有以下效果（我还没有确切地说）弄清楚发生了什么）：

对onEnd正常“翻转”的调用为所需元素设置了还原类。
调用onEnd时，对“{revert flip”操作的onEnd调用会再次设置与上面相同的元素。

这是一种解决方法。我已经使用onBegin和简化版onEnd取消了，因为我不确定revertFlip()电话会发生什么：

$(function() {
    var handlerEnabled = true;
    $('.flippable:not(.reverted)').live('click', function() {
        if (handlerEnabled) {
            var $this = $(this);
            var $prevFlip = $('.reverted');
            var $allBoxes = $('.flippable');

            handlerEnabled = false;

            $prevFlip.revertFlip();
            $prevFlip.removeClass("reverted");
            $this.addClass("reverted");

            $this.flip({
                direction: 'lr',
                color: '#82BD2E',
                content: 'now flipped',
                onEnd: function() {
                    handlerEnabled = true;
                }
            });
        }
        return false;
    });
})

我正在使用布尔标志来启用和禁用事件侦听器。试试这个例子：http://jsfiddle.net/andrewwhitaker/bX9pb/。它应该像您在OP中描述的那样工作（一次只翻转一个）。

您的原始代码（$allBoxes.preventDefault()）无效，因为$allBoxes是元素的集合。 preventDefault是jQuery event object上的函数。

Answer 2

你能试试这个剧本吗？

var $prevFlip;
$('.flippable:not(.reverted)').live('click',function()     {         
    var $this = $(this);         
    var $allBoxes = $('.flippable');                
    $this.flip(         {             
        direction: 'lr',             
        color: '#82BD2E',             
        content: 'now flipped',             
        onBefore: function()             {           
            if($prevFlip){
                $prevFlip.revertFlip();                 
                $prevFlip.removeClass('reverted');              
            }
        },             
        onAnimation: function ()              {                  
            //$allBoxes.preventDefault();             
            //This is not a valid line
        },             
        onEnd: function()             {                  
            $this.addClass('reverted');      
            $prevFlip = $this;
        }          
    });    
    return false;     
});

这只会恢复前一个项目。这不是一个完整的解决方案。我认为还有更多问题。如果我找到它们，我会发布任何进一步的更新。

我认为@Andrew得到了你正在寻找的答案。

Answer 3

您可以使用not()方法从$this中过滤$allBoxes。

$allBoxes.not($this).revertFlip();

不直观的removeClass（）问题

3 个答案: