个人中心
gpt4 book ai didi

javascript - 使用 jquery 隐藏和显示元素

转载 作者：太空宇宙 更新时间：2023-11-03 20:22:27 24 4
gpt4 key购买 nike

我有一个带有用于发表评论的表单的网页(一个文本字段和一个文本区域 + 提交按钮)。我希望该表单一开始是不可见的，并且只显示一个“显示表单”链接以使该表单可见以及显示“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;
        }
    );
});

关于javascript - 使用 jquery 隐藏和显示元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7298132/

24 4 0
文章推荐： javascript - 这个Flash效果可以用js和css重新生成吗？
文章推荐： python - 明确地说，如何让 s3fs 在 AWS 中打开 gz 文件？胶水/S3
文章推荐： python - 关键字不能是表达式吗？
文章推荐： css - 如何在 jQuery Mobile 中右对齐翻转切换开关
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com