0

私は自分のタイトルが少し紛らわしいことを知っています、多分誰かが別のタイトルを提案することができます。

とにかく、私はいくつかの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メソッドを使用して、背景色をオーバーライドできると思いました。

では、なぜこれが私があなたに示したセットアップで機能しないのですか？

編集：申し訳ありませんが、コードを更新して間違ったバージョンをここに貼り付けました。コードを更新していません。

4

3 に答える 3

3

これはセレクターの特異性と関係があります。

セレクターinput[type="text"]には要素名が含まれ、属性を参照するため、仕様は0,0,1,1。です。

ただし、セレクター.text_box_errorには1つの（クラス）属性しか含まれていないため、0,0,1,0–の特異性があり、そのためbackground-color、より高い特異性を持つ他のセレクターによって上書きされます。

セレクターとして使用するだけです。これには、最初のセレクターに「勝つ」input[type="text"].text_box_errorという特異性があります。0,0,2,1

于 2013-03-26T14:46:14.407 に答える
1

このセレクターは、クラスがの要素を探してinput_boxesいますが、HTMLにこのクラス名の要素はありません。

$(".input_boxes")
于 2013-03-26T14:36:21.570 に答える
1

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/

于 2013-03-26T14:55:51.807 に答える