Неинтуитивная проблема removeClass ()

Question

Я использую этот сменный плагин , см. Код в этой скрипке .Цель состоит в том, чтобы перевернуть одну коробку за раз, например, щелкнув второй блок должен 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 вызываются несколько раз, а я думаю, что имеет следующий эффект (я точно не понял, что происходит ):

1. Вызов onEnd для обычного "переворота" устанавливает обратимый класс для нужного элемента.
2. При вызове 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 .

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

Возвращает только один предыдущий элемент. Это не полное решение. Я думаю, что есть больше проблем с этим. Я опубликую дальнейшие обновления, если найду их.

Я думаю, @ Андрей получил ответ, который вы ищете.

Answer 3

Вы можете отфильтровать $this из $allBoxes, используя метод not () .

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