jquery - 我在我的文本输入中添加了一个类，但它没有呈现

Question

我正在使用自动完成功能来填充文本字段。在用户输入一些文本但未从自动完成中选择的地方，我想突出显示该文本字段。

所以在下面的jquery中；

var createAutocomplete = function () {
    var $input = $(this);

    var options = {
        source: $input.attr("data-scd-autocomplete"),
        select: updateAutocompleteForm,
        close: errorAutocompleteForm
    };

    $input.autocomplete(options);
};

如果用户未能从列表中选择，将触发调用此函数的关闭事件；

   var errorAutocompleteForm = function(event, ui) {
        var $input = $(this);
        $input.removeAttr('class');
        $input.attr('class', '');
        $input.addClass("input-validation-error");
    };

所以我从文本字段中删除了现有的类并插入了“input-validation-error”类。但是这个类中的 CSS 没有显示出来，在 IE 开发者工具中它显示这个类中的 CSS 被覆盖了。如何阻止此 CSS 被覆盖？

Answer 1

我发现了问题在我的 CSS 中，我需要将 CSS 类与元素类型联系起来

input[type="text"].input-validation-error,
input[type="search"].input-validation-error,
input[type="password"].input-validation-error {
    border: solid 1px #e80c4d;
}

所以之前 input[type="search"].input-validation-error 丢失了。和类

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

被忽略了。我不得不承认我不明白为什么这个答案是解决方案。因此，可以为那些可以解释这一点的人提供上行报价。