0

有人知道为什么这不起作用吗？当框处于活动状态时，我想从输入框中更改标签的颜色。

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

我希望有一个人可以帮助我 ：）

4

5 回答 5

2

使用您当前的 HTML：

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

JS 小提琴演示。

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

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

JS 小提琴演示。

更抽象（因此 HTML 结构无关紧要），通过for属性选择：

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

JS 小提琴演示。

参考：

于 2013-09-22T16:53:20.793 回答
0

见这里一个非常基本的例子：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");
于 2013-09-22T15:13:37.863 回答
0 
$('input').on('click', function(){
    $(label).toggleClass('active');
});

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

于 2013-09-22T15:15:09.083 回答
0

尝试input:focus而不是.active在您的 CSS 代码中。也省略!important。

input:focus{
   color: #FFA500;
}
于 2013-09-22T15:15:28.783 回答
0

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

$("input").on('focus', function(ev) {
    var t = $(ev.target);
    t.addClass('active');
});
于 2013-09-22T15:15:38.787 回答