javascript - 使用 .hide() jquery 后 Div 重新出现

Question

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

我有一个非常简单的 div 来捕捉名字和姓氏。我想要做的是，如果输入框不为空，则发布到另一个页面(使用 jquery)，删除或隐藏 div1 并显示 div2 以提出问题(隐藏 div 2)。

出于某种原因，当我点击提交按钮时，名字和姓氏被发布到另一个页面并存储在数据库中，但是在警报之后，div1 重新出现而 div 2 消失了。有人可以帮我吗？

非常感谢!

J查询代码:

    <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>

Answer 1

问题是因为您没有阻止按钮单击的默认操作，因此页面重新加载，使内容看起来像是重新出现。试试这个:

<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!');
        }   
    });
});