Question

我知道我的头衔有点令人困惑，也许有人可以提出另一个。

所以无论如何，我正在学习一些Jquery，我想把它用于表单验证，我会显示代码然后问这个问题。

形式：

<form action="" method="POST">
    <ul>
        <li>
            <label for="market_1">Market: </label>
            <input type="text" name="market_1" id="market_1" />
        </li>
   </ul>
</form>

JS：

$(document).ready(function()
{
    $("#market_1").addClass("text_box_error");
});

CSS：

input[type="text"]
{
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #5B5B5B;
    width: 148px;
}

input[type="text"]:hover, input[type="text"]:focus 
{
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #5B5B5B;
    font-weight: bold;
}
.text_box_error 
{
    background-color: red;
}

目前，当我点击提交按钮时，我只是想让它改变颜色。现在我可以让它工作，但是当我使用input[type="text"]来设置输入框的样式时，我无法使它工作。

我想通过这样做我可以将所有输入框设置为相同，然后使用jquery addClass方法我可以覆盖背景颜色。

那么为什么这个设置我没有给你看？

编辑：对不起，我已经更新了代码，并在此处粘贴了错误的版本，我没有更新代码。

Answer 1

这与selector specifity有关。

选择器input[type="text"]包含一个元素名称并引用一个属性，因此它的特定为0,0,1,1。

然而，选择器.text_box_error只包含一个（类）属性，因此它具有0,0,1,0的特定性 - 因此其background-color被另一个具有更高特定性的选择器覆盖

只需使用input[type="text"].text_box_error作为选择器 - 它的特定范围为0,0,2,1，并为第一个选择器提供“胜利”。

Answer 2

此选择器正在查找类input_boxes的元素，但您的HTML中没有此类名称的元素。

$(".input_boxes")

Answer 3

将CSS更改为：

input[type="text"].text_box_error
{
    background-color: red;
}

input[type="text"].text_box_error:hover
{
    background-color: rgba(255, 0, 0, .5);
}

当文本框出现错误时，以及不出现错误时，您可以正确设置两种情况的样式。

JSFiddle：http://jsfiddle.net/5KjVC/

如何在使用输入[type = text]时使用jquery更改表单背景颜色;

3 个答案: