为什么我需要单击以更改焦点以更新元素CSS

时间:2018-09-12 15:04:22

标签: javascript jquery 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()),但它的效果与单击页面不同。

任何见识将不胜感激。

1 个答案:

答案 0 :(得分:0)

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 ,那么您应该不会像看到的那样集中显示该复选框,效果很好。 / p>

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

编辑:

troubling css

这是给您带来麻烦的CSS。