Question

我有一个网页，上面有一个用于发表评论的表单（一个文本字段和一个textarea +提交按钮）。我希望表单最初不可见，只显示一个'showform'链接，使表单可见，以及显示'hideform'链接。当点击'hideform'链接时，表格＆amp; 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文件。

感谢

Answer 1

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

Answer 2

您的选择器错了。他们应该是：

$('.myjsdemo .showaddcommentformlink')

和

$('.myjsdemo .hideaddcommentformlink')

和

$('.myjsdemo .form')

在.selector.another表单中使用它们，您将使用这两个类来定位元素。

即：

<span class="myjsdemo form">

当你添加一个空格时，你是用空格后面的选择器来定位元素，这些元素包含在空格之前的选择器元素。

即：

具有类“myjsdemo”

的元素包含的“form”类的元素

Answer 3

您的选择器错误，请参阅http://jsfiddle.net/j9Zy4/了解您的代码的工作版本。

使用jquery隐藏和显示元素

3 个答案: