javascript - jQuery向上/向下滑动效果在div上不起作用

使用VS 2010开发ASP.NET Web窗体应用程序，并在页面上具有登录文本框和密码文本框。

在这些上方，我有一个简单的div标记，如果登录文本框或密码文本框为空，它将包含错误消息。

JSFIDDLE

<div id="ErrorDiv"></div>

如果任一文本框为空，我希望此div向下滑动以显示错误消息

以下是我尝试过的jQuery代码：

<script>
$(function () {

    $("#btnLogin").click(function () {
        var error = 0;

        if (error == 0) {
            $("#ErrorDiv").slideToggle();
        }

        if ($("#txtLoginID").val() == "") {
            error = 1;
            $("#ErrorDiv").text("Please Enter LoginID");
        }

        if ($("#txtPassword").val() == "") {
            error = 1;
            $("#ErrorDiv").text("Please Enter Password");
        }

        if (error == 1) {
            alert(document.getElementById("ErrorDiv").value());
            $("#ErrorDiv").show();
        }

        else {
            alert(document.getElementById("ErrorDiv").value());
            $("#ErrorDiv").slideUP();
        }
    });
});
</script>

这是行不通的。

我也尝试用$("#ErrorDiv").text("Please Enter LoginID");替换$("#ErrorDiv").html("Please Enter LoginID");，但这没有效果。

可能是什么问题？

最佳答案

首先，这条线不起作用

$("#ErrorDiv").slideUP();

它应该是

$("#ErrorDiv").slideUp(); //lower case p

其次，您的警报document.getElementById("ErrorDiv").value无法使用，因为它是一个div，因此没有值。您可以提醒它是innerHTML document.getElementById("ErrorDiv").innerHTML或使用jQuery $('#ErrorDiv').text()

我的第一个if语句中也没有指出重点

if(error == 0)

每次单击按钮时，将变量error设置为0，因此该语句将始终运行。如果这是您想要执行的操作，则最好始终滑动Toggle div

var error = 0;
$('#ErrorDiv').slideToggle();

我在这里更新了您的小提琴-> http://jsfiddle.net/d9Wwj/3/
我也改变了你的一些逻辑。没有更多错误时，您也不会清除ErrorDiv。

下面是成品

$((function(){
  $("#btnLogin").click(function (){
     var error = "";
     $('#ErrorDiv').slideToggle();

     if($("#txtLoginID").val() == ""){
         error += "Please Enter LoginID";
     }
     if($("#txtPassword").val() == ""){
        if(error){
           error += "<br />Please enter a password";
        } else {
           error += "Please enter a Password";
        }
     }

     if(!error){
        $("#ErrorDiv").html("").slideUp();
     } else {
        $('#ErrorDiv').html(error).slideDown();
     }
  });
});