我有一个带有用于发表评论的表单的网页(一个文本字段和一个文本区域 + 提交按钮)。我希望该表单一开始是不可见的，并且只显示一个“显示表单”链接以使该表单可见以及显示“hideform”链接。单击“hideform”链接时，应使表单和hideform link不可见，而showform 链接应再次可见。
我试过了
<html>
<head>
<title>formopen demo</title>
<link href="formopen.css" type="text/css" rel="stylesheet">
</head>
<script src="jquery-1.4.2.js"></script>
<script src="formopen.js"></script>
<body>
<div class="myjsdemo">
<a href="#" class="showaddcommentformlink">show add commentform</a>
<a href="#" class="hideaddcommentformlink">hide add commentform</a>
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<textarea name="content" rows="2" cols="20" id="content" > </textarea>
</div>
</div>
</body>
</html>
formopen.css
.myjsdemo .form{display:none;}
.myjsdemo .hideaddcommentformlink{display:none;}
formopen.js
$(function(){
$('.myjsdemo.showaddcommentformlink').click(
function(){
$(this).hide();
$('.myjsdemo.hideaddcommentformlink').show();
$('.myjsdemo.form').show();
return false;
}
);
$('.myjsdemo.hideaddcommentformlink').click(
function(){
$(this).hide();
$('.myjsdemo.showaddcommentformlink').show();
$('.myjsdemo.form').hide();
return false;
}
);
});
但是当我点击链接时没有任何反应......我对 javascript 的了解非常少..如果有人可以纠正这段代码中的任何错误，那将是一个很大的帮助..
我将所有文件放在同一目录中并在 firefox 中打开 html 文件。
谢谢
最佳答案
尝试在 CSS 类之间添加一个空格。
.myjsdemo.showaddcommentformlink
应该是
.myjsdemo .showaddcommentformlink
等等。否则 jQuery 将抓取同时应用了两个类的元素。
最终的函数应该是这样的:
$(function(){
$('.myjsdemo .showaddcommentformlink').click(
function(){
$(this).hide();
$('.myjsdemo .hideaddcommentformlink').show();
$('.myjsdemo .form').show();
return false;
}
);
$('.myjsdemo .hideaddcommentformlink').click(
function(){
$(this).hide();
$('.myjsdemo .showaddcommentformlink').show();
$('.myjsdemo .form').hide();
return false;
}
);
});
关于javascript - 使用 jquery 隐藏和显示元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7298132/