jquery - 我怎样才能把这个 jquery 函数做得更好一点呢？

Question

我有一些输入，其顶部带有 float 标签。效果基本上是，在电子邮件文本输入中，它显示“输入您的电子邮件”。当您单击输入时，标签就会消失。

我有一个可以完成这一切的工作函数，但我有一些重复的代码。

IE:

我的 html 看起来像这样:

 <div id="action">

   <form action="/" method="post" id="#register_form">


      <input type="hidden" name="create" value="1" />

      <div class="form-field">
        <label for="register_name">Name (First &amp; Last)</label>
        <input id="register_name" class="form-text" type="text" name="name" tabindex="1"/>
        </div>


    <div class="form-field">
        <label for="register_email">Enter your email</label>
        <input id="register_email" class="form-text" type="text" name="email"  tabindex="2"/>
    </div>

    <div class="form-field">
      <label for="register_password">Password</label>
      <input id="register_password" class="form-password" type="password" name="password" tabindex="3"/>
    </div>

    <button type="submit">Almost there!</button>

  </form>

</div>

jquery 看起来像这样:

$('#action input[type=text], #action input[type=password]').focus(function(){

    // get this label
    var this_id = $(this).attr('id');

    $('label[for='+this_id+']').addClass('in_lighter');


}).blur(function(){

    // get this label
    var this_id = $(this).attr('id');

    if($(this).val()==""){
        $('label[for='+this_id+']').removeClass('in_lighter');
    }

}).keyup(function(){


    // get this label
    var this_id = $(this).attr('id');

    $('label[for='+this_id+']').fadeOut();


});

正如您所看到的，该函数根据它是焦点、模糊还是按键来执行一些不同的操作。但在每个函数中，它都会获取所选输入的 id，然后使用它来标识要使用的标签。如您所见，我重复此代码 3 次:

    // get this label
    var this_id = $(this).attr('id');

有更好的方法吗？有更简化的方法可以达到相同的结果吗？

Answer 1

而不是:

var this_id = $(this).attr('id');
$('label[for='+this_id+']').addClass('in_lighter');

你可以这样做:

$(this).prev("label").addClass('in_lighter');

这将获取下一个前一个元素，即标签，因此您不需要任何 id 连接。