问题描述
我正在使用这个翻转插件，代码见这个小提琴.目标是一次翻转一个盒子，例如单击的第二个框应该 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):
- 对正常翻转"的
onEnd调用设置所需元素的还原类. - 调用
onEnd以实现恢复翻转"操作，在调用 onEnd 时再次设置与上述相同的元素.
- The call to
onEndfor the normal "flip" sets reverted class for the desired element. - The call to
onEndfor 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() 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！