Question

我有这个：

<div class="row" style="display:none" id="divRegistration">
    <div class="col-xs-6">
        <div class="well">
            <div class="form-group">
                <label asp-for="EmailAddress" class="control-label"></label>
                <input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="example@gmail.com">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password" class="control-label">Password</label>
                <input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="ConfirmPassword" class="control-label"></label>
                <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
            </div>
            <div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>
            <a onclick="Register();" class="btn btn-success btn-block">Register</a>
        </div>
    </div>
    <div class="col-xs-6">
        <p class="lead">Already Registered?</p>
        <p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
    </div>
</div>

（我已尝试过所有这些）

function Register() {
        $('#registerErrorMsg').html('hi andy!');
        $("#registerErrorMsg").css("display", "none");
        $('#registerErrorMsg').fadeIn();
        $('#registerErrorMsg').show();
        alert('hi');
}

我的提醒框显示但我的标签没有？

Answer 1

请参阅下面的代码段：首先，您需要更改：

<div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>

进入这个声明：

<div id="registerErrorMsg" class="alert alert-error" style="display:none">Invalid registration</div>

然后将您的脚本更改为：

function Register() {
        $('#registerErrorMsg').html('hi andy!');
        $("#registerErrorMsg").css("display", "block");
        $('#registerErrorMsg').fadeIn();
        $('#registerErrorMsg').show();
        alert('hi');
}

$("#registerErrorMsg").css("display", "block");会将alert div样式从none更改为block，因此会显示您的提醒。

function Register() {
        $('#registerErrorMsg').html('hi andy!');
        $("#registerErrorMsg").css("display", "block");
        $('#registerErrorMsg').fadeIn();
        $('#registerErrorMsg').show();
        alert('hi');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row" id="divRegistration">
    <div class="col-xs-6">
        <div class="well">
            <div class="form-group">
                <label asp-for="EmailAddress" class="control-label"></label>
                <input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="example@gmail.com">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password" class="control-label">Password</label>
                <input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="ConfirmPassword" class="control-label"></label>
                <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
            </div>
            <div id="registerErrorMsg" class="alert alert-info" style="display:none">Invalid registration</div>
            <a onclick="Register();" class="btn btn-success btn-block">Register</a>
        </div>
    </div>
    <div class="col-xs-6">
        <p class="lead">Already Registered?</p>
        <p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
    </div>
</div>

Answer 2

我的提醒框显示但我的标签没有？

这是因为隐藏类在boostrap中定义为：

.hide {
  display: none !important;
}

因此，删除此课程（.removeClass()或.toggleClass()）就足够了。

更改自：

function Register() {
    $('#registerErrorMsg').html('hi andy!');
    $("#registerErrorMsg").css("display", "none");
    $('#registerErrorMsg').fadeIn();
    $('#registerErrorMsg').show();
    alert('hi');
}

为：

function Register() {
     $('#registerErrorMsg').html('hi andy!');
     // $("#registerErrorMsg").removeClass('hide'); 
     //  ...or
     $("#registerErrorMsg").toggleClass('hide');
}

＆＃13;

function Register() {
    $('#registerErrorMsg').html('hi andy!');
    //$("#registerErrorMsg").removeClass('hide');
    $("#registerErrorMsg").toggleClass('hide');
}



$("#divRegistration").show();

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row" style="display:none" id="divRegistration">
    <div class="col-xs-6">
        <div class="well">
            <div class="form-group">
                <label asp-for="EmailAddress" class="control-label"></label>
                <input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="example@gmail.com">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password" class="control-label">Password</label>
                <input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="ConfirmPassword" class="control-label"></label>
                <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
            </div>
            <div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>
            <a onclick="Register();" class="btn btn-success btn-block">Register</a>
        </div>
    </div>
    <div class="col-xs-6">
        <p class="lead">Already Registered?</p>
        <p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
    </div>
</div>

＆＃13;

如何更改此属性警报警告 - 错误隐藏

2 个答案: