不直观的removeClass（）问题
我正在使用这个翻转插件 ，请看这个小提琴中的代码。 目标是一次翻转一个框，例如，单击的第二个框应该revertFlip()前一个框。 在动画期间，我不希望其他框可以点击。 我注意到removeClass()不起作用。
I'm unflipped 1 ... I'm unflipped 9
$('.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
我相信这与调用onBefore和onEnd revertFlip() onEnd 。 这对addClass和removeClass造成了一些奇怪。 看看我修改过的例子： http ： //jsfiddle.net/andrewwhitaker/7cysr/ 。
你会看到你是否打开FireBug， onBefore和onEnd被多次调用，我认为它具有以下效果（我还没有确切地知道发生了什么）：
- 对正常“翻转”的
onEnd调用设置了所需元素的恢复类。 - 当onEnd被调用时，对
onEnd的“revert flip”动作的调用再次设置与上面相同的元素。
这是一个解决方法。 我已经使用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事件对象的一个函数。
你能试试这个剧本吗？
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得到了你正在寻找的答案。
您可以使用not（）方法从$allBoxes过滤$this 。
$allBoxes.not($this).revertFlip();