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

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 に答える
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 に答える