不直观的 removeClass() 问题

问题描述

我正在使用这个翻转插件，代码见这个小提琴.目标是一次翻转一个盒子，例如单击的第二个框应该 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() 调用 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 以实现恢复翻转"操作，在调用 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 因为我不确定 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() 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！