Question

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

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

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

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

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");
});

这是一个updated fiddle。

Answer 2

我在评论中撒谎 - 我将从头开始写这篇文章。我假设您使用.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

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

2 个答案: