使用jquery隐藏和显示元素
using jquery to hide and show elements
我有一个网页的形式发表评论(一个文本字段和一个文本区+提交按钮)。我希望表单在一开始是不可见的,只显示一个"showform"链接,使表单可见,以及显示"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;
}
);
});
选择器错误。它们应该是:
$('.myjsdemo .showaddcommentformlink')
和
$('.myjsdemo .hideaddcommentformlink')
和
$('.myjsdemo .form')
在.selector.another
形式中使用它们,您的目标元素具有两个类。
即:
<span class="myjsdemo form">
当你添加一个空格时,你的目标是在空格之后有选择器的元素,这些元素被在空格之前有选择器的元素所包含。
即:
类为"form"的元素被类为"myjsdemo"的元素包含
您的选择器错误,请参阅http://jsfiddle.net/j9Zy4/查看您的代码的工作版本
相关文章:
- javascript来显示元素属性
- 使用JavaScript或jQuery隐藏和显示元素
- 如何在Angular JS中滚动显示元素
- 如何在使用jQuery应用display:none后正确显示元素
- 仅使用Javascript隐藏/显示元素,而不会弄乱DOM
- jQuery单击并显示元素列表
- 键盘没有在Android和BlackBerry中显示元素焦点
- 在CSS转换期间显示元素的大小值
- 当我们关注jQuery时,只显示元素
- 包含方法和突出显示元素的问题
- JS/JQuery隐藏元素,更改文本,显示元素
- 如何显示元素的一部分,并在单击时切换到所有元素
- 在隐藏元素中显示元素
- 当PROTRACTOR元素后面有元素时,我怎么能知道当前的显示元素
- 在mouseover上显示元素在mouseleave上隐藏
- jquery显示元素是否具有类和特定值的内容
- 不能在复选框旁边显示元素
- 动态显示元素上的JavaScript触摸端;不要开火
- 点击JQuery/HTML5显示元素的索引/位置
- AngularJS:如何默认显示元素,并在按下按钮时切换