使用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隱藏和顯示元素

回答

相關問題