使用jQuery顯示或隱藏div元素

Question

我是jquery新手，我試圖隱藏某些div元素，然后在我的Ajax調用成功時顯示它們。 當頁面加載時，瀏覽器隱藏div元素，在Ajax成功顯示元素，但瀏覽器再次隱藏div元素。

碼

 <script> $(document).ready(function() { $('#sidebar-container').hide(1000); $('#overall-status').hide(1000); $('#submit-date').click(function() { var processDate = $('#processDate').val(); alert(processDate); $.ajax({ type : "POST", url : "launchapptest", data : processDate, dataType : "json", success : function(result) { alert("Success"); $('#sidebar-container').css({ visibility : "visible" }); $('#overall-status').css({ visibility : "visible" }); } }); } ); }); </script> 

請幫助我了解正在發生的事情以及如何避免這種情況。

Answer 1

使用jquery Show事件。

$(document).ready(function() {

        $('#sidebar-container').hide(1000);
        $('#overall-status').hide(1000);


        $('#submit-date').click(function() {
            var processDate = $('#processDate').val();
            alert(processDate);
            $.ajax({
                type : "POST",
                url : "launchapptest",
                data : processDate,
                dataType : "json",
                success : function(result) {
                    alert("Success");
                    $('#sidebar-container').show();
                    $('#overall-status').show();

                }
            });
        }

        );

    });

Answer 2

問題解決了，我創建了一個表單提交按鈕來啟動Ajax調用。 將其更改為普通輸入按鈕。 因為這個頁面正在重新加載。

我將提交按鈕更改為輸入按鈕，以解決此問題。

非常感謝所有的幫助。

Answer 3

.hide()將樣式設置為display:none 。 你需要調用.show() ，而不是.css({visibility:'visible'});

Answer 4

您必須首先停止每個元素的當前動畫隊列（因為非動畫CSS更改不會添加到該隊列）：

另外，正如其他地方所提到的， show()是css visibility的更好選項，因為hide sets display: none而不是visibility 。

  success : function(result) {
                alert("Success");
                $('#sidebar-container').stop().show();
                $('#overall-status').stop().show();
            }

此外，您可能無法停止提交表單，因此頁面將重新加載並重新隱藏div。 嘗試停止該按鈕的默認行為。

$('#submit-date').click(function(e) {
     e.preventdefault()