Question

我的页面中有一个嵌入式样式，用于设置表单中所有文本框的样式：

<style type="text/css">
input[type=text], [type=password] {
    border: 1px solid black; 
    font-family: Verdana, Arial, Georgia, 'Trebuchet MS', 'Times New Roman';
    font-size: 12px;
    height: 15px;
    margin: 0px;
    padding: 3px;
}

.invalidinput {
    border: 1px solid red; 
}
</style>

我也使用JQuery Validation来验证我的表单，我基本上想要在出现错误时将表单中文本框的边框颜色从黑色更改为红色。要做到这一点，我有“.invalidinput”类，我使用.addClass将它添加到“突出显示”部分的文本框中，并使用.removeClass将其删除在“unhighlight”中：

<script type="text/javascript">
$(document).ready(function() {
    $("#frmLogin").validate({
        rules: { 
            txtUsername: "required",
            txtPassword: "required"
        },
        messages: { 
            txtUsername: "Enter your username",
            txtPassword: "Enter your password" 
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass("invalidinput");
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass("invalidinput");
        },
        errorPlacement: function (error, element){
            if (element.attr("id") == "txtUsername") {
                $(error).appendTo($("label[for='txtUsername']"));
            }
            else if (element.attr("id") == "txtPassword") {
                $(error).appendTo($("label[for='txtPassword']"));
            }
            else {
                error.insertAfter(element);
            }
        }
    }); 
}); 
</script>

问题是.addClass和.removeClass不起作用。经过几个小时的搜索和尝试，我发现问题是我用来设置页面中所有文本框样式的嵌入式样式（输入[type = text]，[type = password] {}）。如果我删除它或我将其更改为命名类（如.validinput {}）然后，它工作得很好。我能够使用的唯一解决方法就是使用它：

"$(element).css("border", "1px solid red");"

而不是：

$(element).addClass("invalidinput");

我的问题是，如何使.addClass与我的嵌入式样式一起使用？

感谢。

Answer 1

这不起作用的原因是因为特异性。 input[type=text]选择器比invalidinput选择器更具体。

这应该有效：

[type=text], [type=password] {
    border: 1px solid black; 
    /* other styles... */
}

.invalidinput {
    border: 1px solid black; 
}

或只是将input选择器全部添加到它们：

input[type=text], input[type=password] {
    border: 1px solid black; 
    /* other styles... */
}

input.invalidinput {
    border: 1px solid black; 
}

如何使用JQuery addClass覆盖嵌入式样式？

1 个答案: