时间戳

首页 > 解决方案 > 为什么我需要单击更改焦点才能更新元素 CSS

javascript - 为什么我需要单击更改焦点才能更新元素 CSS

问题描述

我的页面上有一个复选框，我已经为其创建了自定义错误控制 CSS 属性（类似于 has-error & has-success）：

.has-checkbox-error {
    outline-width: 1px;
    outline-style: solid;
    outline-color: #a94442 !important;
}

.has-checkbox-success {
    outline-width: 1px;
    outline-style: solid;
    outline-color: #3c763d !important;
}

这是页面上实际元素的 HTML：

        <div class="checkbox" id="div_terms">
            <div id="input_terms">
                <input type="checkbox" class="form-control" id="terms" name="terms" />
              <p id="terms_p">By checking this box, you agree to the <a id="terms_a" href-"https://www.twfbl.com/joomla30/league-info/league-rules" target="_blank">League Rules</a> and note that they are subject
                to change at any time.  You agree to abide by all league rules.</p>
            </div>
        </div>

当复选框值更改时，它运行以下 jQuery：

jQuery("#terms").on("change", function() {
    if(jQuery("#terms").prop("checked")) {
        jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
        jQuery("#terms").addClass("has-checkbox-success has-feedback");
        jQuery("#input_terms").prop("title", "");
    } else {
        jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
        jQuery("#terms").addClass("has-checkbox-error has-feedback");
        jQuery("#input_terms").prop("title", "Required.  You MUST agree to terms in order to join the league.");
    }
})

但是，当它在页面上执行时，除非您单击页面上的其他位置，否则颜色不会改变？请参阅https://www.twfbl.com/joomla30/registration-form了解我的意思。

我尝试动态更改代码中的焦点（使用 jQuery["#terms_p"}.focus()），但它的反应与单击页面不同。

任何见解将不胜感激。

标签： javascriptjquerycss

解决方案

jQuery("#terms").on("change", function() {
    if(jQuery("#terms").prop("checked")) {
        jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
        jQuery("#terms").addClass("has-checkbox-success has-feedback");
        jQuery("#input_terms").prop("title", "");
    } else {
        jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
        jQuery("#terms").addClass("has-checkbox-error has-feedback");
        jQuery("#input_terms").prop("title", "Required.  You MUST agree to terms in order to join the league.");
    }
})
.has-checkbox-error {
    outline-width: 1px;
    outline-style: solid;
    outline-color: #a94442 !important;
}

.has-checkbox-success {
    outline-width: 1px;
    outline-style: solid;
    outline-color: #3c763d !important;
}

.has-checkbox-success:focus {
    outline-width: 1px;
    outline-style: solid;
    outline-color: #ffcc00 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox" id="div_terms">
            <div id="input_terms">
                <input type="checkbox" class="form-control" id="terms" name="terms" />
              <p id="terms_p">By checking this box, you agree to the <a id="terms_a" href-"https://www.twfbl.com/joomla30/league-info/league-rules" target="_blank">League Rules</a> and note that they are subject
                to change at any time.  You agree to abide by all league rules.</p>
            </div>
        </div>

如您所见，您不应该关注复选框，如果您从上面的代码中删除.has-checkbox-success:focus，它可以正常工作。

您发布的页面中复选框的边框为白色或可能设置为无，请检查您的 CSS 规则。

编辑：

令人不安的CSS

这是给你带来麻烦的css。

推荐阅读