Question

我有一个表单，我只想在控件组没有类错误时更改标签颜色，因为当用户在输入中提交无效文本时，控制组div将类.error添加到显示红色div和红色文本。

我试过这个插入！ for（如果不是）但这会覆盖类.error以添加颜色＃222，我不想要这个......

$(".form-control").focus(function () {
    if (!$(this).parent().parent().parent().is('.error')) {
        $(this).parent().parent().css({
            color: '#222 !important;'
        });
    }
}).blur(function () {
    if (!$(this).parent().parent().parent().is('.error')) {
        $(this).parent().parent().css({
            color: '#ccc !important;'
        });
    }
})

表单的HTML代码：

<form class="form-horizontal" id="myform" novalidate="">
    <div class="control-group">
        <label class="control-label" for="name">Nombre</label>
        <div class="controls">
            <input type="name" class="form-control" data-validation-required-message="Debes escribir tu nombre" name="name" id="name" required="true" aria-invalid="true">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="email">Correo electrónico</label>
        <div class="controls">
            <input type="email" class="form-control" data-validation-required-message="No has escrito correctamente el correo electrónico" name="email" id="email" required="" aria-invalid="true">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emailAgain">Correo electrónico (otra vez)</label>
        <div class="controls">
            <input type="email" data-validation-matches-match="email" data-validation-matches-message="Los correos electrónicos no coinciden" class="form-control" data-validation-required-message="Debes escribir el mismo correo electrónico" required="true" id="emailAgain" name="emailAgain" aria-invalid="false">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="terms-and-conditions">Advertencia legal</label>
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" required="" data-validation-required-message="Debes estar de acuerdo con los términos y condiciones" aria-invalid="true">
                Estoy de acuerdo con los <a id="legal" data-content="CoolFitness se reserva el derecho a usar dicho correo para realizar análisis estadísticos que sin duda te beneficiarán." rel="popover" data-placement="right" data-original-title="Términos y condiciones" data-trigger="hover" href="#">términos y condiciones</a>
            </label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Información sobre</label>
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox" name="qualityControl[]" value="dietas" data-validation-minchecked-minchecked="1" data-validation-minchecked-message="Elige una al menos" aria-invalid="true">
                Dietas
            </label>
            <label class="checkbox">
                <input type="checkbox" name="qualityControl[]" value="ej-fitness" aria-invalid="false">
                Ejercicios Fitness
            </label>
            <label class="checkbox">
                <input type="checkbox" name="qualityControl[]" value="encuestas" aria-invalid="false">
                Encuestas
            </label>
        </div>
    </div>
    <div class="modal-footer">
        <button id="btnSave" type="submit"  class="btn btn-success modalbtn">Guardar cambios</button>
        <button id="btnClose" type="button" class="btn btn-default modalbtn cancel" data-dismiss="modal">Cerrar</button>
    </div>
    <audio>
        <source src="sounds/correct.mp3"></source>
    </audio>
</form>

Answer 1

你可以用CSS做到这一点。

label {color:blue;}
.error label {color:red;}

.form-control {color:#ccc;}
.form-control:focus {color:#222;}
.error .form-control:focus {color:red;}

http://jsfiddle.net/45nLw/

更新：您的问题并不完全清楚您的要求是什么。根据您的评论，我想您希望在（非错误的）字段成为焦点时更改label颜色。如果是这种情况，那么尝试以下JS：

$(".form-control").focus(function(){
    $(this).parents(".control-group:not(.error)").find("label").css("color","#222");
}).blur(function () {
    $(this).parents(".control-group:not(.error)").find("label").css("color","#ccc");
})

http://jsfiddle.net/45nLw/2/

更新：仍在努力了解您的要求这个？ http://jsfiddle.net/ksapq/7/

Answer 2

您需要的是.hasClass()来检查该元素是否具有您想要的特定类。

http://api.jquery.com/hasclass/

因此，您的支票代码可能如下所示：

if (!$(this).parent().parent().parent().hasClass('error')) {
        $(this).parent().parent().css({
            color: '#222'
        });
    }

检查以下小提琴，您将看到您的代码与hasClass（）一起使用。文本颜色在焦点时会变为灰色，在模糊时会变为黑色。

重要提示：从jquery.css（）中应用的css中删除!important标记。它不会将css应用于元素。

http://jsfiddle.net/x79J6/

如果没有类更改颜色文本

2 个答案: