Question

有人知道为什么这不起作用？我想在框激活时从输入框更改标签的颜色。

JavaScript：

$("input").focus(function() {
var inputID = document.activeElement.id;
document.getAnonymousElementByAttribute('label','for', inputID).setAttribute('class', 'active');
});

HTML：

<label for="username">Username</label>
<input name="username" id="username" type="text"><br>
<label for="passwort">Passwort</label>
<input name="passwort" id="passwort" type="password"><br>
<input type="submit" class="button" value="login">

CSS：

.active{
    color: #FFA500 !important;
}

我希望有人可以帮助我:)。

Answer 1

使用您当前的HTML：

$('input').focus(function(){
    $(this).prev().addClass('active');
}).blur(function(){
    $(this).prev().removeClass('active');
});

JS Fiddle demo

或者，使用on()（假设您正在使用jQuery 1.7或更高版本）：

$('input').on('focus blur', function(e){
    var prev = $(this).prev();
    prev[e.type == 'focus' ? 'addClass' : 'removeClass']('active');
});

JS Fiddle demo

更抽象（所以HTML结构并不重要），按for属性进行选择：

$('input').on('focus blur', function(e){
    var label = $('label[for="' + this.id + '"]');
    label[e.type == 'focus' ? 'addClass' : 'removeClass']('active');
});

JS Fiddle demo

参考文献：

addClass()。
Attribute-equals ([attribute="value"]) selector。
blur()。
focus()。
on()。
prev()。
removeClass()。

Answer 2

请参阅此处获取一个非常基本的示例：http://jsfiddle.net/zn5fB/

在这里，对于事件触发的示例：http://jsfiddle.net/zn5fB/1/

使用JavaScript设置样式通常遵循以下格式：

document.getElementById("abc").style.[css property name in camel case] = "[value]";

你会发现使用诸如jQuery之类的库来使这个（以及许多其他事情）变得更容易是很常见的。使用jQuery，您可以编写如下代码：

// find all elements with the tag name "bar" that are direct 
// descendants of an element with the class name "foo"
$(".foo > BAR").css("color", "red");

Answer 3

$('input').on('click', function(){
    $(label).toggleClass('active');
});

你过于复杂的事情，保持简单，有时开发人员最有用的工具是退格键。

Answer 4

在CSS代码中尝试使用input:focus代替.active。也可以省略!important。

input:focus{
   color: #FFA500;
}

Answer 5

您将jQuery函数与非jQuery混合使用。尝试仅使用jQuery函数来处理您的任务。在下面的示例中，我将.focus()更改为.on('focus',callback)，这是相同的，但更容易理解。在jQuery中，您应该获得事件的目标并将其包装为$()。您也可以使用this，但我尝试不使用它有几个原因。然后你可以应用任何jQuery方法：

$("input").on('focus', function(ev) {
    var t = $(ev.target);
    t.addClass('active');
});

更改活动输入框上的标签颜色

5 个答案: