Question

我确信这里有很多类似的问题，但我仍然无法找到答案。如果输入[type =“text”]有一个值，我想要的是在文档准备好的标签上添加一个类，如果用户将删除该输入值，则删除该类（更好的说，如果输入则删除标签类没有模糊的价值）。

到目前为止

代码：

    <div class="input-wrap">            
                <input type="text" name="textdemo" id="textdemo" size="20" value="" class="textdemo" />
            <label class="demo-label" for="textdemo">{L_USERNAME}</label>
    </div>


<script type="text/javascript">
jQuery(document).ready(function(){
    $('.input-wrap .textdemo').val() ) {
          $('label.demo-label').addClass('input-has-value');
    }

});
</script>

Answer 1

这应该可以解决问题：

function checkForInput(element) {
  // element is passed to the function ^
  
  const $label = $(element).siblings('label');

  if ($(element).val().length > 0) {
    $label.addClass('input-has-value');
  } else {
    $label.removeClass('input-has-value');
  }
}

// The lines below are executed on page load
$('input.textdemo').each(function() {
  checkForInput(this);
});

// The lines below (inside) are executed on change & keyup
$('input.textdemo').on('change keyup', function() {
  checkForInput(this);  
});

label.input-has-value {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrap">
  <input type="text" name="textdemo" id="textdemo" size="20" value="" class="textdemo" />
  <label class="demo-label" for="textdemo">{L_USERNAME}</label>
</div>

Answer 2

您需要检查输入是否有值：

$(document).ready(function(){
    if($('.input-wrap .textdemo').val() !='' ) {
          $('label.demo-label').addClass('input-has-value');
    }
    $('.input-wrap .textdemo').blur(function(){
        if($('.input-wrap .textdemo').val() !='' ) {
          $('label.demo-label').addClass('input-has-value');
        }else{
          $('label.demo-label').removeClass('input-has-value');
        }   
    }
});

jquery如果输入文本有值，则将类添加到label，如果没有值则删除它

2 个答案: