php - 如何在链接单击时插入和删除 div 及其内容

Question

我是使用 jQuery 的新手，但我真的想在我的网站中包含一些常见的 javascript 功能。我有一个 div 向用户显示一个表单，他/她可以在其中输入一些信息。我想做的是在需要时显示 div，但在不需要时隐藏它。

这是我用来选择和删除 div 的 jQuery 代码

<script type="text/javascript">
        $("#newRequestCancel").click(function() {
            $("#newRequestForm").remove();
        });
</script>

这是html标签

 <h3 class="main-top">

                    <a href="#" id="new-request-make">New Product</a>
                </h3>
                <div id="newRequestForm" class="panel">
                    <form action="index.php" method="post">
                        <p><label>Title</label><span class="required">*</span></p>
                        <p><input type="text" /></p>
                        <p><label>Image</label><span class="required">*</span></p>
                        <p><input type="file" /></p>
                        <p><label>Description</label><span class="required">*</span></p>
                        <p><textarea></textarea></p>
                        <p><label>Preferred Price [KES]</label><span class="required">*</span></p>
                        <p><input type="number" /></p>
                        <p><label>County</label><span class="required">*</span></p>
                        <p><select><option disabled selected="selected">.: Select a County :.</option></select></p>
                        <p><label>Location</label><span class="required">*</span></p>
                        <p><input type="text" /></p>
                        <br/>
                        <p>Any field marked with an asterisk (<span class="required">*</span>) is required.</p>
                        <br/>
                        <p><input type="submit" value="Make Request" /><span class="ibar"></span><a href="#" id="newRequestCancel">Cancel</a></p>
                        <br/>
                    </form>
                </div>

因此，如果我单击新产品链接，它应该插入 div，当我单击 div 内的取消链接时，它应该删除它。请帮忙！

Answer 1

嗨，Masaba，欢迎来到该网站。

你正在寻找.show()而.hide()不是.remove()。Remove 完全删除 HTML，因此您无法再次显示它。

$("#newRequestCancel").click(function() {
        $("#newRequestForm").hide();
    });

$("#new-request-make").click(function() {
    $("#newRequestForm").show();
});

Answer 2

  $(document).ready(function()
    {
         $('#new-request-make').click(function()
         {
              $('#newRequestform').show();
         });
          $("#newRequestCancel").click(function() {
              $("#newRequestForm").hide();
         });
    });

Answer 3

在这里，为您准备了一份精美的礼物。

http://jsfiddle.net/eX3QK/

<div id="login">
    <a href="#"><p style="font-size:16px;">Hello</p></a>
    <div class="arrow_box">
        <a href="logout.php">Logout</a>
    </div>
</div>

使用 Jquery，将 html 标签更改为任何内容。

$("#login").click(function(e){
    $("#login div").css("visibility","visible");
   e.stopPropagation();
});

$("html").click(function(e){
    $("#login div").css("visibility","hidden");
});

Answer 4

查看 jQuery .show()和.hide( )

以显示：

$("#new-request-make").click(function() {
    $("#newRequestForm").show();
});

隐藏：

$("#newRequestCancel").click(function() {
    $("#newRequestForm").hide();
});

Answer 5

<script type="text/javascript">
    $("#newRequestCancel").click(function() {
        $("#newRequestForm").hide();
    });

    $("#newRequestLoad").click(function() {
        $("#newRequestForm").show();
    });
</script>

这应该可以解决问题。