如何在單擊事件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);
});