我想根据用户在特定输入字段上提供的数据来动态更改data-custom-class(即,如果用户不为“ username”提供至少1个字符,则工具提示必须为红色并带有一些文本,如果用户提供)有效的“用户名”,工具提示必须为绿色,并带有其他一些文字。
问题在于文本实际上正在改变,但类却没有改变(它保留了JQuery设置的第一个类。
我已经尝试过attr()和tooltip(options)-(即通过attr()的“ data-customClass”或通过tooltip()的customClass)。如您所见,我什至试图强制处理工具提示,并在再次设置属性之前先删除属性,但这似乎都不起作用。
Tooltip会创建一个新的“ div”,即使它更改了“ text”属性,“ custom-class”属性也不会。
注意:我正在使用Bootstrap 4 + Popper.js + Bootstrap自定义类(Js + CSS)扩展。 extension files link here
如果您对此有任何建议,我将不胜感激!
先谢谢。
原始HTML:
<form action="/register" method="post">
<div class="form-group row flex-v-center">
<div class="col-xs-3 col-sm-2 text-left">
<label for="username"> Username: </label>
</div>
<div class="col-xs-5 text-left">
<input name="username" id="username" type="text" class="form-control-sm" data-custom-class="tooltip-danger" data-togle="tooltip">
<small id="usrndHelpBlock" class="d-block form-text text-muted">
Username must be at least 1 character long and must not be already registered.
</small>
</div>
</div>
<div class="form-group row flex-v-center">
<div class="col-xs-3 col-sm-2 text-left">
<label for="pwd">Password: </label>
</div>
<div class="col-xs-5 text-left">
<input name="password" id="pwd" type="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="form-control-sm" data-toggle="tooltip" data-placement="aright" data-custom-class="tooltip-primary" title="">
<small id="passwordHelpBlock" class="d-block form-text text-muted">
Password must be at least 8 characters long , contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
</div>
</div>
<div class="form-group row flex-v-center">
<div class="col-xs-3 col-sm-2 text-left">
<label for="conf">Confirmation: </label>
</div>
<div class="col-xs-5 text-left">
<input name="confirmation" id="conf" type="text" class="form-control-sm" data-toggle="tooltip" data-placement="auto" data-custom-class="tooltip-primary" title="Confirmation doesn't match password!">
<small id="confHelpBlock" class="form-text text-muted">
Confirmation must match password.
</small>
</div>
</div>
<div class="form-group row flex-v-center">
<div class="col-xs-8">
<button id="b_register" class="btn btn-primary">Register Now !</button>
</div>
</div>
</form>
脚本
<script type="text/javascript">
$('#username').focusout(function() {
if ($('#username').val() == "") {
$('#username').tooltip('dispose');
$('#username').attr("title","User must be at least 1 character long!");
$('#username').tooltip('toggle');
$('#username').focus();
} else {
$('#username').tooltip('dispose');
$('#username').removeAttr("data-custom-class");
$('#username').attr("data-custom-class", "tooltip-success");
$('#username').attr("title","Username avaiable!");
$('#username').tooltip('dispose');
$('#username').tooltip('toggle');
}
});
</script>
答案 0 :(得分:2)
要更改data attribute,您需要更改:
$('#username').removeAttr("data-custom-class");
$('#username').attr("data-custom-class", "tooltip-success");
具有:
$('#username').data("customClass", "tooltip-success");
然后在第一个if部分中再次设置为危险。
摘要:
$('#username').tooltip();
$('#username').on('focusout', function() {
if ($('#username').val() == "") {
$('#username').tooltip('dispose');
$('#username').attr("title","User must be at least 1 character long!");
$('#username').data("customClass", "tooltip-danger");
$('#username').tooltip('toggle');
$('#username').focus();
} else {
$('#username').tooltip('dispose');
$('#username').data("customClass", "tooltip-success");
$('#username').attr("title","Username avaiable!");
$('#username').tooltip('dispose');
$('#username').tooltip('toggle');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Custom-Classes-Bootstrap-Tooltips/bootstrap-tooltip-custom-class.css">
<script src="https://www.jqueryscript.net/demo/Custom-Classes-Bootstrap-Tooltips/bootstrap-tooltip-custom-class.js"></script>
<form action="/register" method="post">
<div class="form-group row flex-v-center">
<div class="col-xs-3 col-sm-2 text-left">
<label for="username"> Username: </label>
</div>
<div class="col-xs-5 text-left">
<input name="username" id="username" type="text" class="form-control-sm" data-custom-class="tooltip-danger" data-togle="tooltip">
<small id="usrndHelpBlock" class="d-block form-text text-muted">
Username must be at least 1 character long and must not be already registered.
</small>
</div>
</div>
<div class="form-group row flex-v-center">
<div class="col-xs-3 col-sm-2 text-left">
<label for="pwd">Password: </label>
</div>
<div class="col-xs-5 text-left">
<input name="password" id="pwd" type="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="form-control-sm" data-toggle="tooltip" data-placement="aright" data-custom-class="tooltip-primary" title="">
<small id="passwordHelpBlock" class="d-block form-text text-muted">
Password must be at least 8 characters long , contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
</div>
</div>
<div class="form-group row flex-v-center">
<div class="col-xs-3 col-sm-2 text-left">
<label for="conf">Confirmation: </label>
</div>
<div class="col-xs-5 text-left">
<input name="confirmation" id="conf" type="text" class="form-control-sm" data-toggle="tooltip" data-placement="auto" data-custom-class="tooltip-primary" title="Confirmation doesn't match password!">
<small id="confHelpBlock" class="form-text text-muted">
Confirmation must match password.
</small>
</div>
</div>
<div class="form-group row flex-v-center">
<div class="col-xs-8">
<button id="b_register" class="btn btn-primary">Register Now !</button>
</div>
</div>
</form>