不直观的 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):
- 对正常翻转"的
onEnd
调用设置所需元素的还原类. - 调用
onEnd
以实现恢复翻转"操作,在调用 onEnd 时再次设置与上述相同的元素.
- The call to
onEnd
for the normal "flip" sets reverted class for the desired element. - 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.
相关文章