當另一個元素變為活動狀態時，jQuery更改元素的CSS

Question

當輸入變為“活動”時，我試圖更改與輸入元素相鄰的標簽的背景顏色。

這需要同時單擊輸入和在輸入元素之間制表鍵。

如果用戶單擊輸入，我可以使它正常工作，但是如果用戶將其切換到輸入元素，則我的解決方案將不起作用。 我還不得不為每個輸入元素重復代碼。 考慮到我可能有很多輸入元素，我認為必須有一個更優雅的方法？

這是基本HTML + CSS的鏈接。

http://jsfiddle.net/xXqhH/

Answer 1

假設我已經了解了您要正確執行的操作，只需將事件處理程序綁定到focusin和focusout事件即可。 您可以使用prev查找緊鄰的前一個兄弟，並使用css設置CSS屬性：

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

這是最新的小提琴 。

Answer 2

我在評論中撒謊-我將從頭開始編寫。 我認為您遇到的問題是單擊而不是使用制表符，這是由於使用了jQuery函數.click()所致。 .focus()和CSS類，應該提供所需的結果：

jQuery代碼：

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

額外的CSS：

label.active {
    background: red !important;
}

工作演示