14

お問い合わせフォームがあります。input:focus の入力ボックスの親 div にクラスを追加したいと考えています。これがフィドルです。入力ボックスだけでなく、入力フォーカスで div の背景色を紫に変更する必要があります。

マークアップ:

<div class="round">
    <div class="round_label">name</div>
    <input type="text" class="round_text">
</div>

Javascript:

jQuery(document).ready(function($) {
    $(".round_text:focus").parent().css('background', '#8b66ac');
    $('.round_text:focus').parent().css('background-color', 'red');
});

CSS:

.round {
    background: none repeat scroll 0 0 #F3F3F3;
    border-radius: 30px 30px 30px 30px;
    border-top: 1px solid #B2B2B2;
    height: 50px;
    padding-left: 20px;
    width: 440px;
}
.round_text:focus {
    background: none repeat scroll 0 0 #8b66ac;
}
.round_label {
    border-right: 1px solid #D1D1D1;
    color: #B6B6B6;
    float: left;
    font-size: 16px;
    height: 40px;
    padding-top: 10px;
    width: 156px;
}
.round_text {
    background: none repeat scroll 0 0 #F3F3F3;
    border: medium none;
    color: #424242;
    float: left;
    height: 50px;
    width: 240px;
}

また、次の 2 つのプロパティを追加する必要があるかのように教えてもらえますか。 

$(".round_text").focus(function(){
       $(this).parent().css('background', '#8b66ac','color','#fff');

  }).blur(function(){
       $(this).parent().css('background', /*color*/);
  })
4

4 に答える 4

25

代わりにクラスを追加してスタイルを与えることができます

jQuery(document).ready(function($) {

 $(".text").focus(function(){
   $(this).parent().removeClass("round");
   $(this).parent().addClass("bluebg");

  }).blur(function(){
       $(this).parent().removeClass("bluebg");
   $(this).parent().addClass("round");
  })

});    

.bluebg {
background: none repeat scroll 0 0 #8b66ac;
color:#623886;
}
于 2012-06-04T09:27:03.483 に答える
10

フォーカス イベントを使用する

  $(".round_text").focus(function(){
       $(this).parent().css('background', '#8b66ac');

  }).blur(function(){
       $(this).parent().css('background', /*color*/);
  })

編集: toggleClass() を使用した代替ソリューション

CSS

.round_text:focus, .round.is_focused {
     background: none repeat scroll 0 0 #8b66ac;
}

JS

$(".round_text").on('focus blur', function(){
     $(this).parent().toggleClass('is_focused');
})
于 2012-06-04T08:08:42.950 に答える
4

これを試して 

 $("input").on("focus",function(){
    $(this).parent().addClass("any_class").css("background","purple");
    });
于 2012-06-04T08:07:12.747 に答える
3

私があなたの質問を正しく理解していれば、

要素を選択していますが、イベントfocusedの親の css を変更する必要があります。divfocus

これを行う、

jQuery(document).ready(function($) {

    $(".round_text").focus(function(){
        $(this).parent().css('background', '#8b66ac');
    })
});

フィドル

于 2012-06-04T08:09:45.817 に答える