此代码无效,我做错了什么?
$(document).ready(function(){
$("a.hide-para").click(function(){
$('p').hide();
$(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
});
$("a.show-para").click(function(){
$('p').show();
$(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
});
});
答案 0 :(得分:9)
它不起作用,因为在元素绑定到特定元素/类组合后动态添加/删除类。也就是说,在与该类有任何链接之前,您可以将click事件添加到具有“show-para”类的链接(或者可能反过来取决于您的默认值)
在任何一种情况下,jQuery都有live
函数来解决这个问题,只需将click
处理程序更改为.live('click', function(){ })
答案 1 :(得分:4)
在修改DOM时,您正在丢失绑定。要么停止更改类名,要么使用live()
绑定事件:
$('a.hide-para').live('click', function() { ...
答案 2 :(得分:0)
假设你的课程总是以“hide-para”开头,这应该有效:
$(document).ready(function() {
$("a.hide-para").click(function(){
if($(this).hasClass('hide-para')){
$('p').hide();
$(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
} else {
$('p').show();
$(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
}
});
});
答案 3 :(得分:0)
它将适用于第一次更改,但之后它将再次执行相同的更改。
加载页面时会应用一次事件,更改类不会删除并添加事件处理程序。
您可以使用同时执行这两项处理的事件处理程序,而不是使用一个事件处理程序进行隐藏,而使用一个事件处理程序:
$(function() {
$("a.hide-para, a.show-para").click(function(e) {
if ($(this).hasClass('hide-para')) {
$('p').hide();
$(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
} else {
$('p').show();
$(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
}
e.preventDefault();
});
});
此外,调用preventDefault
会阻止点击的默认操作,即在链接之后。
答案 4 :(得分:-1)
我想这个:
<强> removeClass( '隐藏 - 对')。addClass( '显示 - 对')强>
导致您的问题。
答案 5 :(得分:-1)
如果您的点击实际上是关注链接而不是进行事件调用,则可以执行以下操作:
$("a.hide-para").click(function(evt){
evt.preventDefault();
// the rest is your code...
这可以防止发生默认(链接跟随操作)...除了在IE6中。
希望这有帮助。
答案 6 :(得分:-2)
在点击处理程序中尝试return false;