不直观的 removeClass() 问题

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() 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！