Question

我如何定位单个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的{{1}}？

Answer 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');
 });

Answer 2

$('.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');
  });
});

Answer 3

试试这个

<强> demo fiddle

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

Answer 4

试试这个，

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

<强> Demo

如何定位单个输入焦点？

4 个答案: