如何在单击事件javaScript后隐藏div

Question

这是我的代码（JavaScript）...

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#track1').click(function() {
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#show").slideDown(2000);
        });
        $('#track2').click(function() {
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#show1").fadeIn(3000);
        });
        $('#track3').click(function() {
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#show1").fadeOut(3000);
            $("#show").slideUp(3000);
        });

    });

    function quick_confirm() {
        $('#wrap').append('<embed id="embed_player"     src="alert.mp3" autostart="true" hidden="true"></embed>');
        var agree = confirm("Are you sure you wish to continue?");
        if (agree) {
            $("#show1").fadeOut(3000);
            $("#show").slideUp(3000);
            return true;
        }
        else
            return false;
    }

    function valid() {
        var name = document.getElementById("name").value;
        var pass = document.getElementById("pass").value;
        error = '';
        if (name == "" && pass == "")
            error = "\nEnter both fields";
        else if (name == '')
            error = "Enter your name";
        else if (pass == '')
            error = "\nEnter your password";


        if (error != "") {
            document.getElementById("error").innerHTML = error + "<button id='showtime'>HIDE</button>";
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#error").slideDown(3000);
            return false;
        }
        $('#showtime').click(function() {
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#error").toggle; //**help me solve the problem..
        });
    }
</script>

<div id='error'></div>
<form method='post' action="testsound.php" onsubmit='return valid()' >
    <strong>Name</strong><input type='text' id='name' name='name'>
    <strong>password</strong><input type='password' id='pass' name='pass'>
    <input type='submit' value='Login'>
</form>

请尽快帮助我，需要帮助隐藏div元素...提交表单后，将显示div错误，但单击隐藏按钮（显示时间为id）后，我无法隐藏div。

Answer 1

确保实际上使用括号调用toggle功能，如下所示：

$("#error").toggle();

或者可以使用hide代替：

$("#error").hide();

另外，请注意，在valid函数中，如果发生错误，则在将click事件绑定到#showtime元素之前， return false 。 有多种方法可以解决此问题，具体取决于页面的组织方式（仅从此处提供的代码很难分辨出来）。

• 在返回之前绑定偶数：

   $('#showtime').click(function() { $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>'); $("#error").toggle(); // or hide() }); if (error != "") { document.getElementById("error").innerHTML = error + "<button id='showtime'>HIDE</button>"; $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>'); $("#error").slideDown(3000); return false; } 

• 将事件绑定到document.ready处理程序中：

   $(document).ready(function() { ... $('#showtime').click(function() { $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>'); $("#error").toggle(); // or hide() }); } 

Answer 2

您可以使用，

$('#error').click(function() {
    $(this).hide(3000);
});