jQuery if hasclass then function
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11660835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery if hasclass then function
提问by Commandrea
This is an animation which should only fire if the div rip_tab has the class 'rip_tab_ripped', which is applied after the div is clicked on. However, the animation is firing even before the rip_tab_ripped class has been toggled. Each function works separately without the if clause. Any help would be appreciated--
这是一个动画，只有当 div rip_tab 具有类“rip_tab_ripped”时才会触发，该类在 div 被点击后应用。然而，动画甚至在 rip_tab_ripped 类被切换之前就开始了。每个函数在没有 if 子句的情况下单独工作。任何帮助，将不胜感激 -
var sauceSquirt = {
init: function() {
$("#rip_tab").click(function() {
$(this).toggleClass("rip_tab_ripped");
});
function fireA() {
$("#sauceRed").switchClass("sauce_hide", "sauceRedGo", 500)
}
function fireB() {
$("#sauceBlue").switchClass("sauce_hide", "sauceBlueGo", 500)
}
if ($('#rip_tab').hasClass("rip_tab_ripped")) {
$('#packet').click(function() {
var events = [fireA, fireB];
//declare counter
if (!this.counter) {
this.counter = 0;
}
events[this.counter]();
this.counter = (this.counter + 1) % 3;
});
}
}
}
$(document).ready(function() {
sauceSquirt.init();
});?
回答by sabithpocker
Looks like you are having trouble with this portion:
看起来您在这部分遇到了问题：
if ($('#rip_tab').hasClass("rip_tab_ripped")) {
$('#packet').click(function() {
var events = [fireA, fireB];
//declare counter
if(!this.counter) { this.counter = 0; }
events[this.counter]();
this.counter = (this.counter + 1) % 3;
});
}
Can you just change it to:
你能不能把它改成：
$('#packet').click(function() {
if ($('#rip_tab').hasClass("rip_tab_ripped")) {
var events = [fireA, fireB];
//declare counter
if(!this.counter) { this.counter = 0; }
events[this.counter]();
this.counter = (this.counter + 1) % 3;
}
return false;
});
You can also take a look at jQuery Promise
你也可以看看jQuery Promise
回答by Commandrea
Resolution is to move the if ($ statement to the line below the click statement.
解决方法是将 if ($ 语句移动到 click 语句下方的行。
回答by Prince
What is the #packet? In my opinion, there is this statement should be written like this:
什么是#packet？在我看来，有这种说法应该是这样写的：
this.counter = this.counter % 2;
回答by nbrooks
Remember that everything in this method is called as you initialize, while you want to delay the class check until the #packetis clicked:
请记住，此方法中的所有内容在您初始化时都会被调用，而您希望将类检查延迟到#packet被单击：
$('#packet').click(function() {
if ( $('#rip_tab').is('.rip_tab_ripped') ) {
var events = [fireA, fireB];
//declare counter
this.counter = this.counter || 0; // set to 0 if value is null
events[this.counter]();
this.counter = ++this.counter % 2; // You only have two methods
}
});
