当输入变为“活动”时,我试图更改与输入元素相邻的标签的背景颜色。
这需要同时单击输入和输入元素之间的标签。
如果用户点击了输入,我就可以使用它,但如果用户选中了一个输入元素,我的解决方案就不起作用了。我还必须为每个输入元素重复代码。考虑到我可能有很多输入元素,我认为必须有一个更优雅的方式?
以下是基本HTML + CSS的链接。
答案 0 :(得分:3)
假设我已经理解了您要正确执行的操作,只需将事件处理程序绑定到focusin
和focusout
事件即可。您可以使用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;
}