使用.hide(）jquery后，Div再次出现

Div reappears after using .hide() jquery

本文关键字：Div hide jquery 使用更新时间：2023-09-26

我检查了所有类似的问题，并尝试了不同的解决方案，但一点运气都没有。

我有一个非常简单的div来获取名称和姓氏。我想做的是，如果输入框不为空，则发布到另一个页面（使用jquery），删除或隐藏div1，并显示div2以询问问题（div2是隐藏的）。

出于某种原因，当我点击提交按钮时，名称和姓氏会被发布到另一个页面并存储在数据库中，但在警报之后，div1再次出现，div2消失。有人能帮我一下吗？

非常感谢！

Jquery代码：

    <script>
        function saveDetailsToDB()
        {
            var name = document.getElementById('name').value;
            var surname = document.getElementById('surname').value;
            if (name === "" && surname === "") 
            {
                alert("Please, enter your details!");
                $("#UQ").css( "display", "none");   
            }
            else if(name !== "" && surname === "")
            {
                alert("Please, enter your Surname");
                $("#UQ").css( "display", "none");
            }
            else if(name === "" && surname !== "")
            {
                alert("Please, enter your Name");
                $("#UQ").css( "display", "none");
            }
            else
            {
                $.post("saveDetails.php",{ name: name,surname: surname });
                $("#detailsDiv").hide();
                $("#UQ").show();
                alert('You have been successfully registered!');
            }   
        }
    </script>

HTML:

    <div id = "detailsDiv">
        <form>
            <b><label>Name:</label></b><br> 
            <input type = "text" id = "name"><br><br>
            <b><label>Surname:</label></b><br>
            <input type = "text" id = "surname"><br><br>
            <button onclick="saveDetailsToDB();">Send</button>
        </form>
    </div>
    <div id = "UQ">
    <b><label>Please enter your question.</label></b><br><br>
    <form>
        <textarea id = "question" rows="4" cols="40"></textarea><br><br>
        <button onclick="saveQuestionToDB()">Save</button>
    </form>
</div>

问题是因为您没有阻止按钮点击的默认操作，所以页面会重新加载，这会使内容看起来像是再次出现。试试这个：

<button onclick="saveDetailsToDB(); return false;">Send</button>

或者更好的是，从HTML中删除过时的onclick属性，并使用JavaScript:附加事件

<button class="btn-save">Send</button>

$(function() {
    $('.btn-save').click(function(e) {
        e.preventDefault();
        var name = $('#name').val();
        var surname = $('#surname').val();
        if (name === "" && surname === "") {
            alert("Please, enter your details!");
            $("#UQ").hide();
        }
        else if(name !== "" && surname === "") {
            alert("Please, enter your Surname");
            $("#UQ").hide();
        }
        else if(name === "" && surname !== "") {
            alert("Please, enter your Name");
            $("#UQ").hide();
        }
        else {
            $.post("saveDetails.php", { 
                name: name,
                surname: surname 
            });
            $("#detailsDiv").hide();
            $("#UQ").show();
            alert('You have been successfully registered!');
        }   
    });
});