jquery - 动态更改工具提示自定义类

Question

我想根据用户在特定输入字段上提供的数据动态更改数据自定义类(即，如果用户没有为“用户名”提供至少 1 个字符，则工具提示必须为红色并带有一些文本，如果用户提供有效的“用户名”，工具提示必须为绿色并带有一些其他文本)。

问题是文本实际上在改变，但类没有(它保留了 JQuery 设置的第一个类。

我已经尝试过 attr() 和 tooltip(options) - (即通过 attr() 的“data-customClass”或通过 tooltip() 的 customClass)。正如您所看到的，我什至尝试强制处理工具提示并在再次设置属性之前删除属性，但这些似乎都不起作用。

工具提示创建了一个新的“div”，尽管它更改了属性“text”，但“自定义类属性”却没有更改。

注意:我使用的是 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>

Answer 1

为了改变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>