2

単一のinput focus.

    $(".right input").focus(function(){
    $(".left span").addClass('focus');
}).blur(function(){
    $(".left span").removeClass('focus');
});

このコードは、spanフォーカスされている要素にinput のみクラスを追加できるように設定するにはどうすればよいinputですか? これが私のhtmlです

<div class="left">
  <span class="name"></span>
  <span class="email"></span>
  <span class="phone"></span>
  <span class="address"></span>
</div>
<div class="right">
<p>
<label for="name">Your Name:</label>
<input id="name" type="text" value="Name" autocomplete="off">
</p>
<p>
<label for="email">Email Address:</label>
<input id="email" type="text" value="Email" autocomplete="off">
</p>
<p>
<label for="phone">Phone Number:</label>
<input id="phone" type="text" value="Phone" autocomplete="off">
</p>
<p>
<label for="address">Your Address:</label>
<input id="address" type="text" value="Address Line 1" autocomplete="off">
</p>
<p>
<label for="address2">Line Address 2:(optional)</label>
<input id="address2" type="text" value="Address Line 2" autocomplete="off">
</p>
</div>

編集 このコードに対して選択された回答で指定されたコードを実装できますか?

        // Trying to target font customization on single input focus
    // and not all together
    $("#fs").change(function() { // change font family style.
        $('.email').css("font-family", $(this).val());
    });
    $("#size").change(function() { // change font size.
        $('.email').css("font-size", $(this).val() + "pt");
    });

フォーカスされているのspan所属を編集するには?input

4

4 に答える 4

1

thisリファレンスを使用

 $(".right input").focus(function(){
    $(".left").find('.'+this.id).addClass('focus');  //<--find element with those classes inside .left element
 }).blur(function(){
   $(".left").find('.'+this.id).removeClass('focus');
 });
于 2013-10-17T06:45:29.403 に答える
1

これを試して、

$(".right input").focus(function(){
    $(".left span."+this.id).addClass('focus');
}).blur(function(){
    $(".left span."+this.id).removeClass('focus');
});

デモ

于 2013-10-17T06:53:04.263 に答える
1 
$('.right input').each(function(){
  var id = $(this).attr('id');

  $(this).bind('focus', function(){
     $('.left').find('.'+ id).addClass('focus');
  });

  $(this).bind('blur', function(){
    $('.left').find('.'+ id).removeClass('focus');
  });
});
于 2013-10-17T06:46:17.870 に答える
1

これを試して

デモフィドル

 $(".right input").focus(function(){
     var cls = $(this).prop('id');
     $(".left span."+cls).addClass('focus');
 }).blur(function(){
     $(".left span").removeClass('focus');
 });
于 2013-10-17T06:49:57.397 に答える