jQuery切换类不工作?
非常简单地说:currentItem.toggleClass('open');
行似乎不起作用。
更准确地说,当使用 firebug 检查结果时,我可以看到“open”类在相关元素上闪烁(出现并立即消失)。所以就像这个函数实际上被触发了两次(当然我只点击了一次)。
有人可以解释一下这是为什么以及如何预防吗?
这是我的 jQuery 代码:
$('div.collapse ul.radio_list li input[type=radio]').click(function (event) {
var currentTree = $(this).parent().parent().parent();
var currentItem = $(this).parent().parent();
var currentGroup = currentItem.attr('rel');
$(this).parents('ul').children('li').removeClass('select');
if ($(this).is(':checked')) {
currentItem.addClass('select');
}
currentItem.toggleClass('open');
var currentLevel = 0;
if (currentItem.is('.level1')) {currentLevel = 1;}
if (currentItem.is('.level2')) {currentLevel = 2;}
if (currentItem.is('.level3')) {currentLevel = 3;}
var nextLevel = currentLevel + 1;
currentTree.children('li').filter('li[rel ^=' + currentGroup + '].level' + nextLevel).animate({'height': 'show', 'opacity': 'show'}, 250).addClass('currentChild');
});
这是我的 HTML 代码的一部分,为了更好的可读性而稍微简化了(我知道不是很漂亮,但我对 HTML 输出只有有限的控制):
<div class="col_left collapse">
<ul class="radio_list" rel="7">
<li class="onglet level0" rel="group1">
<span class="onglet level0">
<input type="radio" />
<label>Services Pratiques</label></span>
<input type="hidden" value="1">
</li>
提前致谢。
Very simply put : the line currentItem.toggleClass('open');
doesn't seem to work.
More precisely, when inspecting the results with firebug, I can see the class "open" flashing (appearing and immediately disappearing) on the relevant element. So it's like the function is actually triggered twice (of course I only click once).
Can somebody explain me why this is and how to prevent it?
Here is my jQuery code :
$('div.collapse ul.radio_list li input[type=radio]').click(function (event) {
var currentTree = $(this).parent().parent().parent();
var currentItem = $(this).parent().parent();
var currentGroup = currentItem.attr('rel');
$(this).parents('ul').children('li').removeClass('select');
if ($(this).is(':checked')) {
currentItem.addClass('select');
}
currentItem.toggleClass('open');
var currentLevel = 0;
if (currentItem.is('.level1')) {currentLevel = 1;}
if (currentItem.is('.level2')) {currentLevel = 2;}
if (currentItem.is('.level3')) {currentLevel = 3;}
var nextLevel = currentLevel + 1;
currentTree.children('li').filter('li[rel ^=' + currentGroup + '].level' + nextLevel).animate({'height': 'show', 'opacity': 'show'}, 250).addClass('currentChild');
});
And here is a part of my HTML code, slightly simplified for better readability (not very pretty I know, but I only have a limited control on the HTML output) :
<div class="col_left collapse">
<ul class="radio_list" rel="7">
<li class="onglet level0" rel="group1">
<span class="onglet level0">
<input type="radio" />
<label>Services Pratiques</label></span>
<input type="hidden" value="1">
</li>
Thanks in advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
问题已解决:JS文件实际上在HTML头中包含了两次,这导致每次点击都会触发该函数两次。
Problem solved: the JS file was actually included twice in the HTML head, which caused the function to be triggered twice with each click.
我在我的网站上遇到了类似的问题,我发现当我第一次摆弄它时,我不小心将切换类挂钩一直复制到了底部。哎呀!确保寻找双重呼叫!
I had a similar problem on my site, and I found that I had accidently duplicated the toggleclass hook all the way at the bottom, when first messing around with it. Oops! Make sure to look for double calls!
我这样做时遇到了类似的问题:
html:
js:
导致点击被注册两次!
I had a similar problem doing this:
html:
js:
results in clicks being register twice!
我遇到了同样的问题,并意识到我不小心绑定了该函数两次。我原本打算将代码从一个 javascript 文件移动到另一个文件,但不小心将原始代码留在了原来的位置。
I had the same issue and realized I had accidentally bound the function twice. I had originally meant to move the code from one javascript file to another but accidentally left the original in its place.