問題描述
我正在使用這個翻轉插件，代碼見這個小提琴.目標是一次翻轉一個盒子，例如單擊的第二個框應該 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() 問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！