使用jquery隐藏和显示元素

我有一个表单用于发布评论（一个文本框和一个textarea +提交按钮）。我希望表单最初不可见，只显示一个'showform'链接窗体可见以及显示“隐藏表格”链接。单击“隐藏表格”链接时，& hideform link表单应该变为不可见，并且showform链接应该再次可见。我想这使用jquery隐藏和显示元素

<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文件。

谢谢

来源

2011-09-04 markjason72

尝试在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; 
     } 
    ); 
});

来源

2011-09-04 08:45:21

你的选择是错误的。他们应该是：

$('.myjsdemo .showaddcommentformlink')

和

$('.myjsdemo .hideaddcommentformlink')

和

$('.myjsdemo .form')

使用他们在.selector.another表格，您可以用靶向两类元素。

即：

<span class="myjsdemo form">

当你添加一个空格，你靶向与空间后选择，即通过与空间之前选择元素包含的元素。

即：

元素与由与类“myjsdemo”

来源

2011-09-04 08:45:43 bevacqua

你的选择是错误的，看到http://jsfiddle.net/j9Zy4/为您的代码的工作版本元素包含类的“形式”。

来源

2011-09-04 08:46:24

使用jquery隐藏和显示元素

回答

相关问题