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

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="[e-mail]">
<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

我的警报框显示，但我的标签没有？

发生这种情况是因为类隐藏在 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');
}

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

<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="[e-mail]">
<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>

Answer 2

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

<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="[e-mail]">
<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>