不直观的removeClass（）问题 [英] Unintuitive removeClass() problem

问题描述

我正在使用此翻转插件，请参阅这个小提琴。目标是一次翻转一个盒子，例如点击的第二个框应该 revertFlip（）前一个。在动画期间，我不希望其他框可以点击。我注意到 removeClass（）无效。

I'm using this flip plugin, see the code in this fiddle. The goal is to flip one box at a time, e.g. the second box clicked should revertFlip() the previous one. During the animation I don't want the other boxes to be clickable. I noted that the removeClass() is not working.

<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;
    });

我将非常感谢您的建议和建议。

I'll appreciate a lot your advise and suggestions.

编辑：

错误控制台输出： $ allBoxes.preventDefault不是函数

推荐答案

我认为这与 revertFlip（）调用<$ c有关$ c> onBefore 和 onEnd 。这会导致一些奇怪的事情 addClass 和 removeClass 。查看我修改过的示例： http://jsfiddle.net/andrewwhitaker/7cysr/ 。

I believe this has something to do with revertFlip() calling onBefore and onEnd. This is causing some weirdness with addClass and removeClass. Check out my modified example: http://jsfiddle.net/andrewwhitaker/7cysr/.

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

You'll see if you open up FireBug that onBefore and onEnd are called multiple times, with I think is having the following effect (I haven't exactly worked out what's going on):

1. 对正常翻转的 onEnd 的调用为所需元素设置了还原类。


2. 调用onEnd时，对revert flip动作的 onEnd 的调用会再次设置与上面相同的元素
。

1. The call to onEnd for the normal "flip" sets reverted class for the desired element.
2. The call to onEnd for the "revert flip" action sets the same element as above again when onEnd is called.

这是一种解决方法。我已经使用 onBegin 和简化 onEnd 取出，因为我不确定是怎么回事c $ c> revertFlip（）致电：

Here's a workaround. I've taken out using onBegin and simplified onEnd since I'm not exactly sure what's going on with the revertFlip() call:

$(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中描述的那样工作（一次只翻转一个）。

I'm using a boolean flag to enable and disable the event listener. Try out this example: http://jsfiddle.net/andrewwhitaker/bX9pb/. It should work as you described in your OP (only flipping one over at a time).

您的原始代码（ $ allBoxes.preventDefault（））无效，因为 $ allBoxes 是元素的集合。 preventDefault 是 jQuery上的一个函数事件对象。

Your original code ($allBoxes.preventDefault()) is invalid, because $allBoxes is a collection of elements. preventDefault is a function on the jQuery event object.

这篇关于不直观的removeClass（）问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！