jQueryは、別の要素がアクティブになったときに要素のCSSを変更します。

Question

入力がアクティブになると、入力要素に隣接するラベルの背景色を変更しようとしています。

これは、入力のクリックと入力要素のタブ移動の両方で機能する必要があります。

ユーザーが入力をクリックした場合、これを動作させることができましたが、ユーザーが入力要素にタブすると解決できませんでした。私は各入力要素のコードを繰り返す必要もありました。私は入力要素がかなりあると考えていますが、もっと優雅なやり方が必要だと思いました。

ここには、基本的なHTML + CSSとのリンクがあります。

http://jsfiddle.net/xXqhH/

Answer 1

私はコメントに嘘をつきました - 私はこれを一から書いていきます。私はあなたがクリックで動作していたが、タブではなかった問題は、.click() jQuery関数を使用していたためだと仮定します。エクストラCSS

$('input:text').focus(function(e) { 
    $('label').removeClass('active'); 
    $(this).prev('label').addClass('active'); 
}); 

：

label.active { 
    background: red !important; 
} 

Working Demo

Answer 2

私はちょうどfocusinとfocusoutイベントにイベントハンドラをバインドし、あなたが正しく何をしようとして理解してきたと仮定。あなたはCSSプロパティを設定するために、直前の兄弟を見つけるためにprevを使用し、cssことができます。

$("input").focusin(function() { 
    $(this).prev("label").css("background-color", "red"); 
}).focusout(function() { 
    $(this).prev("label").css("background-color", "gray"); 
}); 

ここupdated fiddleです。