Question

使用VS 2010开发ASP.NET Web窗体应用程序＆amp;在页面上有一个登录文本框和密码文本框。

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

<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");，但这没有效果。

可能是什么问题？

Answer 1

首先，这一行不起作用

$("#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，因此该语句将始终运行。如果这是你想做的事情，你也可以随时滑动div

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

我在这里更新你的小提琴 - ＆gt; 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();
     }
  });
});

Answer 2

试试这个

<div id="ErrorDiv" style="display:none;">Error</div>
<form>
    <input type="text" id="txtLoginID"/>
    <input type="password" id="txtPassword"/>
    <input type="submit" id="btnLogin"/>
</form>

脚本：

$("#btnLogin").click(function() {
    var error = '';
    if (error == '') {
        $("#ErrorDiv").hide();
    }
    if ($("#txtLoginID").val() == "") {
        error = 'Please Enter LoginID \n';
    }
    if ($("#txtPassword").val() == "") {
        error += 'Please Enter Password'
    }
    if (error != '') {
        alert(error);
        $("#ErrorDiv").text(error).show();
    } else {
        $("#ErrorDiv").slideUP();
    }
    return false;
});

Fiddle

jQuery上滑/下移效果不适用于div

2 个答案:

jQuery上滑/下移效果不​​适用于div

2 个答案:

jQuery上滑/下移效果不适用于div