0

サインアップフォームを作成しているとしましょう。ここで、合計 4 つのフィールドのうち空のフィールドを強調表示したいと思います。これで、一連の if-else ステートメントを実行できるようになりましたが、それには永遠に時間がかかります。

次のコードがあるとします。

Javascript:

if($firstname === "" || $lastname==="" || $email ==="" && $phone === ""){
        //What goes here?
    }

これら ($firstname、$lastname など) のどれが true であるかを見つけて、その特定の変数の css を変更できるようにして、入力フィールドを照らして情報を表示できるようにします。入力されていません。

既存のコード: http://jsfiddle.net/EVkge/

Click on JSFiddle to see code
4

2 に答える 2

3

あなたはこれを過度に複雑にしています。単にaddClass()無名関数で使用してください：

$('input').addClass(function () {
    return this.value == '' ? 'empty' : '';
});

JS フィドルのデモ。

明らかに、empty希望するクラス名のクラス名を変更してください。お察しの''とおり、:は空の文字列で、 が( の前の評価)と等しくないthis.value場合に返されます。''?

inputコメントに記載されているように、関連する要素が空でなくなったときに追加されたクラスを削除できれば、これはより良いでしょう。それを念頭に置いて、その動作が明らかな単純な方法：

$('input:button').click(function () {
    $('input').each(function () {
        var that = $(this),
            val = that.val();
        if (val === '') {
            that.addClass('empty');
        } else {
            that.removeClass('empty');
        }
    });
});

JS フィドルのデモ。

そして、第二に、上記と同等のより簡潔なアプローチ:

$('input:button').click(function () {
    $('input').each(function(){
        $(this)[this.value == '' ? 'addClass' : 'removeClass']('empty');
    });
});

JS フィドルのデモ。

Object.propertyNameこれは、表記形式との両方を使用してオブジェクトのメソッドにアクセスできるという事実を利用していますObject['propertyName']。また、これらの角括弧内で条件付き (三項) 演算子を実行して、addClass()またはremoveClass()メソッドを使用してempty次の括弧内に指定されたクラス名。

参考文献:

于 2013-03-05T00:26:11.887 に答える
1

フィールドをループして、空の場合は各フィールドを確認し、上記のようにクラスを追加できます。

$('input:button').click(function () {
    $('input[type="text"]').each(function (indx) {
        var $currentField = $(this);
        if( $currentField.val() == '' ) {
            $currentField.addClass('empty');
        } else {
            $currentField.removeClass('empty');
        }
    });
});

また、これにいくつかの追加機能を追加しました： http://jsfiddle.net/jeffpowrs/Wzj8M/1/

于 2013-03-05T00:43:55.517 に答える