Javascript 使用jquery隐藏和显示元素_Javascript_Jquery_Html_Css_Forms

Javascript 使用jquery隐藏和显示元素

javascript jquery html css forms

Javascript 使用jquery隐藏和显示元素,javascript,jquery,html,css,forms,Javascript,Jquery,Html,Css,Forms,我有一个带有表单的网页，用于发布评论（一个textfield和一个textarea+submit按钮）。我首先希望表单不可见，并且只显示一个“showform”链接，以使表单可见并显示“hideform”链接。单击“hideform”链接时，表单和hideform链接应不可见，并且showform链接应该再次可见。我试过这个 <html> <head> <title>formopen demo</title> <link href="for

我有一个带有表单的网页，用于发布评论（一个textfield和一个textarea+submit按钮）。我首先希望表单不可见，并且只显示一个“showform”链接，以使表单可见并显示“hideform”链接。单击“hideform”链接时，表单和

hideform链接

应不可见，并且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.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;
        }
    );
});

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

及

在

选择器中使用它们。另一个

表单中，您将两个类都作为元素的目标

i、 e:

添加空间时，使用空间后的选择器将图元作为目标，这些图元由空间前使用选择器的图元包含

i、 e:

类为“form”的元素包含在类为“myjsdemo”的元素中，您的选择器是错误的。它们应该是：

$('.myjsdemo .showaddcommentformlink')

及

在

选择器中使用它们。另一个

表单中，您将两个类都作为元素的目标

i、 e:

添加空间时，使用空间后的选择器将图元作为目标，这些图元由空间前使用选择器的图元包含

i、 e:

类为“myjsdemo”的元素包含类为“form”的元素。如果选择器错误，请参阅以获取代码的工作版本。

如果选择器错误，请参阅以获取代码的工作版本