Question

如果文本框的值为空，我想将以下style = 'position: relative; left: 42px;'应用于标签。和onfocus这种风格必须删除

<label for'13321'>Name</label><input type='text' id='13321' class='box'>
<label for'14422'>Name</label><input type='text' id='14422' class='box'>

Answer 1

将样式放入类中，比如yourClass，然后您可以使用以下内容：

$(function() {
    $('input.box').filter(function() {
         return $(this).val() === "";
    })
    .prev('label')   // go to label
      .addClass('yourClass')
    .end()    // back to input
    .one('focus', function() {
         $(this).prev('label').removeClass('yourClass');
    });
});

或没有filter（你必须测试更高效的内容）：

 $('input.box:not([value]), input.box[value=""]')
   .prev('label')
     .addClass('yourClass')
   .end()
   .one(...

编辑：我错过了您要将该类添加到标签中。固定的。

更新：如果您想重新申请该课程，以防该值保持为空，您已添加blur听众，并使用focus代替one上面：

.focus(function() {
    $(this).prev('label').removeClass('yourClass');
})
.blur(function() {
    if($(this).val() === "") {
        $(this).prev('label').addClass('yourClass');
    }
})

Answer 2

CSS

.empty{
    position: relative; left: 42px;        
}

JS

  $(function() {
      $(":input:text").each(function(){
         if( $(this).val() == "")
         {
             $(this).prev("label").addClass("empty");
             $(this).focus(function(){
                     $(this).prev("label").removeClass("empty");
                 })
         }
      });
   });

演示

http://jsfiddle.net/jURc9/13/

Answer 3

Jquery：

$(document).ready(function(){
$('input.box').each(function(){
   if($(this).val()=="") {
       $(this).addClass('new-class');
   }
})
   $('input.box').focus(function(){
       $(this).removeClass('new-class')
   })
})

CSS：

.new-class {
   position: relative;
   left: 42px;
}

在加载时应用Class

3 个答案: