使用jquery隐藏和显示元素

using jquery to hide and show elements

本文关键字：显示 元素 隐藏 jquery 使用      更新时间：2023-09-26

我有一个网页的形式发表评论(一个文本字段和一个文本区+提交按钮)。我希望表单在一开始是不可见的，只显示一个"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/查看您的代码的工作版本

相关文章：