Question

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

我有一个工作功能，但我有一些重复的代码。

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连接。

我怎么能更好地做这个jquery函数？

1 个答案: