Question

我是jquery的新用户，我试图隐藏某些div元素，然后在Ajax电话成功时显示它们。加载页面时，浏览器会隐藏div元素，在Ajax成功显示元素，但浏览器再次隐藏div元素。

代码

＆＃13;

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

＆＃13;

请帮助我了解正在发生的事情以及如何避免这种情况。

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()是将visibility作为隐藏集display: none而不是visibility的更好选择。

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

此外，您可能无法停止提交表单，因此页面将重新加载并重新隐藏div。尝试停止该按钮的默认行为。

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

使用jQuery显示或隐藏div元素

4 个答案: