0

ここでかなり基本的なことを見落としています。チェックボックスがクリックされるたびに、グループ内の特定の要素に色を付けたいです。したがって、これらの要素を観察可能にする必要があります。

これは私のhtmlがどのように見えるかです

<p>
    <label>
        <i>bla2</i>
        <input type="checkbox" />
    </label>
</p>

<p>
    <label>
        <i>bla3</i>
        <input type="checkbox" />
    </label>
</p>

私のJSは次のようになります

$(document).ready(function() {

    function handleCheckbox () { 

        if ( $(this).closest(':checkbox').is(':checked') ) {
            $('this').closest('i').css('color','green');
        } else {
            $('this').closest('i').css('color','red');
        }
    }

    handleCheckbox();
    $('label').on('click', handleCheckbox() );

 });
4

3 に答える 3

1

.closest()現在の要素を調べてから、隣接要素ではなく先祖の階層を調べます。あなたの場合、thisラベルオブジェクトを指すので、子を見て<i>タグと<input>タグを見つけることができます。他にもいくつかのコーディング エラーがあります。

また、関数が適切に機能するためには、 sethandleCheckbox()の値をオブジェクトに設定する必要があるため、関数を直接呼び出して、すべての色を適切に設定することを期待することはできません。代わりに、ページ内のすべてのラベルを繰り返し処理し、それぞれを呼び出す必要があります。以下のコードで.this<label>handleCheckbox().each()

これを修正する方法は次のとおりです。

$(document).ready(function() {
    function handleCheckbox() {
        // the this pointer here will point to the label object so you need
        // can use .find() to find children of the label object
        var newColor;
        if ($(this).find("input").is(":checked")) {
            newColor = "green";
        } else {
            newColor = "red";
        }
        $(this).find("i").css("color", newColor);
    }
    // hook up click handler and initialize the color for all labels
    $('label').on('click', handleCheckbox).each(handleCheckbox);        

 });

実際のデモを参照してください: http://jsfiddle.net/jfriend00/tRQ99/また、初期色も初期チェックボックス状態に基づいて設定されていることに注意してください。

コードには次の問題がありました。

  1. .closest()ご先祖様に上がります。隣人は見つかりません。
  2. コールバック関数を渡すときは、最後に を使用しません()。これにより、関数がすぐに実行され、関数の実行の戻り値が渡されるためです。かっこなしで実行される関数への参照を渡したいだけです。
  3. あなたは引用しませんthis。文字列ではなく、JavaScript 変数のように扱います。
  4. ポインターはコールバック内のthisラベル オブジェクトを指すため、子要素を調べて<i>および<input>オブジェクトを見つける必要があります。または のいずれ.children()かを使用して、.find()それらを見つけることができます。
  5. の最初の呼び出しは機能しませんでした。これは、 がオブジェクトに設定されているhandleCheckbox()場合にのみ機能するためです(イベント ハンドラーで機能する方法)。したがって、イベント ハンドラーと同じ関数を初期化に使用するには、すべてのラベルを反復処理し、その関数に対して が適切に設定されていることを確認する必要があります。これを行う簡単な方法は、コードの提案で示したとおりです。this<label>this.each()
于 2013-11-11T17:24:36.923 に答える