Jqueryのフォーカスの問題

-1

できるだけ汎用関数を持つことを望む次のコードがあります。一番上のラベルは色を変える必要があるときに起こる必要があるとき。私はそれの後ろに色のグラデーションがあるので、私はコーナーに透明なPNGを使用する必要があります。レイアウト幅は、イベントハンドラを設定する前に準備ができているので、私は本当にあまりにもmuch.`Jqueryのフォーカスの問題

<div class="inputBody"> 
<div class="inputtop"><span class="inputtoptext">Username</span></div> 
<div><input type="text" size="25"></div>` 
</div> 

<script> 
$('input').focus(function() { 
    $(this).addClass("yellowinput"); 

}); 

$('input').blur(function() { 
    $(this).removeClass("yellowinput"); 
}); 
</script>

出典

2012-03-14 David Nuckols

問題がありますか？それは動作しませんか？どのようなエラーが出ていますか？ – ManseUK

**あなたがあなたの質問を読んでいる他の誰かであると想像してください**、あなたはその男が何について質問しているか考えていますか？ – gdoron

私は入力の上の背景に背景を変更するように求めています。私は再フォーマットして読みやすくしました。あなたがページを読み込むとき、 "inputtoptext"は青い背景を持っていました。テキスト入力ボックスをクリックすると黄色に変えたい。 –

このようなユニットで動作するコードを1つ作ることができます。すべての関連id値はクラス名に変更され、全体がコンテナに入れられます。これにより、この入力コンテナに関連付けられたオブジェクトを、イベントの原因となったオブジェクトに対する一般的な方法で見つけることができます。

$('input').focus(function() { 
    $(this).closest("inputContainer").addClass("hasFocus"); 
}); 

$('input').blur(function() { 
    $(this).closest("inputContainer").removeClass("hasFocus"); 
});

次に、あなただけのオブジェクトかどうかによって、すべてのCSSルールが偶発的になるだろう：FYI、異なるアプローチがはるかに少ないコードで行われ、このように、主にCSSルールを使用することができ

<div class="inputContainer"> 
    <span class="orderlabel-left"> 
     <img src="resources/images/labelbackground-left.png" class="leftsidecorneruser"> 
    </span> 
    <span class="orderlabel orderlabelcommon">Username</span> 
    <span class="orderlabel-right"> 
     <img src="resources/images/labelbackground-right.png" class="rightsidecorneruser"> 
    </span> 
    <div> 
     <input type="text" value="" name="" class="orderinput" size="40" tabindex="1" id="user"> 
    </div> 
</div> 


$('input').focus(function() { 
    var container = $(this).closest(".inputContainer"); 
    container.find(".leftsidecorneruser").attr("src", "resources/images/yellowleft.png"); 
    container.find(".rightsidecorneruser").attr("src", "resources/images/yellowright.png"); 
    container.find(".orderlabelcommon").removeClass("orderlabel").addClass("yellowbackground"); 
}); 
$('input').blur(function() { 
    var container = $(this).closest(".inputContainer"); 
    container.find(".leftsidecorneruser").attr("src", "resources/images/labelbackground-left.png"); 
    container.find(".rightsidecorneruser").attr("src", "resources/images/labelbackground-right.png"); 
    container.find(".orderlabelcommon").addClass("orderlabel").removeClass("yellowbackground"); 
});

親CSSクラス.hasFocusを持っているかどうか。画像は背景画像に変更する必要がありますが、CSSでも可能です。

出典

2012-03-14 21:40:52 jfriend00

それはうまくいった。以前は一番近い機能を使ったことはなかった。 –

@DavidNuckols - あなたがここでstackoverflowの新機能であるように、質問をするときにあなたがコミュニティに貢献する方法は、あなたの質問に最もよく答えた回答をコミュニティに伝えることです。答えの？それはまた、最終的にあなたがここで他の特権を持つことを可能にするいくつかの評判ポイントを得るでしょう。 – jfriend00

-1

は、あなたが本当にDOMを待つ必要があるHTMLを変更することはできません液状にする必要がある：

<script type="text/javascript"> 
    $(document).ready(function() { 
     // your code here 
    }); 
</script>

これがあなたの問題を解決するかどうかはわかりません（他の人が指摘しているように、質問からは分かりません）が、これは良い習慣です。また、scriptタグを<head>タグの間に配置する必要があります。

出典

2012-03-14 21:40:27 Christoffer

彼のスクリプトは 'body'の一番下にあるように見えますので、それは問題ではありません。 – gdoron

javascriptコードが物理的にファイル内のDOM要素の後にある場合、これは必須ではありません。 – jfriend00

これを実行するのが一般的な慣行であることにご注意ください。 – Christoffer

Jqueryのフォーカスの問題

答えて

関連する問題