1

5 つの検索条件入力ボックスがあるフォームがあります。入力ボックスをクリアするには、ページに「すべてクリア」ボタンを配置するという追加の要件を受け取りました。

「すべてクリア」ボタンdivを、入力ボックスが空の場合は背景が灰色になり、入力ボックスに何かがある場合は背景が赤になる背景画像を実際に使用したいと思います。

「すべてクリア」ボタンをクリックすると、入力ボックスがクリアされます。

ユーザーが検索ボックスに何かを入力したときの赤い背景画像への切り替えを除いて、ほとんどすべてが機能しています。私はjsfiddleを構築しました：http://jsfiddle.net/pJgyu/27896/私の問題を示しています（不要なものを排除するために、背景画像の代わりに背景色を使用しました）。

私のjsfiddleのJavaScriptは、私がやりたいことと一致し、次のようになります。

function clearSearchClick() {
    $('.ui-clear').removeClass('enabled').addClass('disabled');
    $(':input').val('');
    $('.first').focus();
}

function docKeyPress(event) {
    if (event.which === 13) {
        event.preventDefault();
        alert('pretend I searched');
    }
}

function searchEmpty() {
    var valid = true;
    $(':input').each(function() {
        if ($(this).val() !== '') return false;
    });
    return valid;    
}

function inputKeyUp(event) {
    if (!searchEmpty()) {
        $('ui-clear.disabled').removeClass('disabled').addClass('enabled');
    }
}

$(function () {
    $('.first').focus();
    $('.ui-clear').click(clearSearchClick);
    $(':input').keyup(inputKeyUp);
    $(document).keypress(docKeyPress);
});

私はjavascriptについて次のことを知っています：

  1. ピント.firstが効く
  2. .ui-clearクリックハンドラーが機能します

ユーザーが何かを入力すると、最初の検索ボックスの左側にあるブラック ボックスが赤くなりません。この目標を達成するための正しく効率的な方法についての洞察をいただければ幸いです。

4

1 に答える 1

1

物事を複雑にしすぎている可能性があると思います...

私が正しく理解している場合、フォームの入力にユーザーが入力したテキストが含まれている場合、(適用されたクラスに基づいて) div の外観を変更したいですか?

また、変更ではなくキーアップ イベントでこれを行いたいですか?

だから、私はこのようなことをします

最初に、div に適用されるクラスでデフォルト (黒) の背景を設定します。

.ui-clear {
    border: thin black outset;
    height: 24px;
    width:24px;
    display: inline;
    float: left;
    background-color: black;
}

および「有効」のクラス

.enabled {
    background-color: red;
}

これを機能させるために必要なスタイルはこれだけです

次に、コード - 繰り返しますが、シンプルにしてください

$(function () {
    $('.first').focus();
    $('.search input:text').keyup(function(){
        var allCrit="";
        $('.search input:text').each(function(){
            allCrit += $(this).val();
        });
        $('.ui-clear').toggleClass("enabled", allCrit != "");         
    });
});

ここで何をしているのですか？

  1. 各入力ボックスのキーアップ イベントをキャプチャする
  2. それらを反復処理し、各 val を文字列に連結します
  3. 文字列に何かが含まれているかどうかをテストし、含まれている場合は、有効なクラスを切り替えます
于 2013-02-06T04:49:22.260 に答える