当另一个元素变为活动状态时,jQuery会更改元素的css

时间:2012-02-07 16:31:42

标签: javascript jquery css html5

当输入变为“活动”时,我试图更改与输入元素相邻的标签的背景颜色。

这需要同时单击输入和输入元素之间的标签。

如果用户点击了输入,我就可以使用它,但如果用户选中了一个输入元素,我的解决方案就不起作用了。我还必须为每个输入元素重复代码。考虑到我可能有很多输入元素,我认为必须有一个更优雅的方式?

以下是基本HTML + CSS的链接。

http://jsfiddle.net/xXqhH/

2 个答案:

答案 0 :(得分:3)

假设我已经理解了您要正确执行的操作,只需将事件处理程序绑定到focusinfocusout事件即可。您可以使用prev查找前一个兄弟,并使用css设置CSS属性:

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

这是一个updated fiddle

答案 1 :(得分:1)

我在评论中撒谎 - 我将从头开始写这篇文章。我假设您使用.click() jQuery函数时遇到的问题与点击相关,而不是使用Tab键。使用.focus()代替CSS类,应该提供所需的结果:

jQuery代码:

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

额外的CSS:

label.active {
    background: red !important;
}

Working Demo