JQuery和click函数
此代码没有按预期工作,我做错了什么JQuery和click函数,jquery,click,Jquery,Click,此代码没有按预期工作,我做错了什么 $(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();
$(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');
});
});
尝试返回false;在单击处理程序中,它不起作用,因为在元素绑定到特定元素/类组合后,您正在动态添加/删除类。也就是说,您正在将click事件添加到具有show para类的链接,然后才有与该类的任何链接,或者根据您的默认设置,以其他方式添加
在任何一种情况下,jQuery都有live函数来解决这个问题,只需将您的单击处理程序更改为.live'click',函数{}您在修改DOM时正在丢失绑定。停止更改类名或使用live绑定事件: 我认为: 移除类'hide-para'。添加类'show-para'
是导致您出现问题的原因。如果您的单击实际上是在链接后面,而不是在进行事件呼叫,则可以执行以下操作:
$("a.hide-para").click(function(evt){
evt.preventDefault();
// the rest is your code...
这将防止发生以下操作的默认链接。。。除了IE6
希望这有帮助。假设您的类总是以隐藏段落开头,这应该可以:
$(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');
}
});
});
它将在第一次更改时起作用,但在那之后,它将再次执行相同的更改 事件在加载页面时应用一次,更改类不会删除和添加事件处理程序 与使用一个事件处理程序进行隐藏和一个事件处理程序进行显示不同,您可以使用一个同时执行以下两项操作的事件处理程序:
$(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会阻止单击的默认操作,即跟踪链接。它在做什么而不是打算做什么?他的单击可能只起一种作用,因此返回false不会起任何作用。不,删除类不会删除绑定。问题是它并没有删除绑定并添加另一个绑定;
$(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();
});
});