使用onfocus事件影响元素

时间:2016-06-17 08:30:32

标签: javascript jquery

我怎么能只影响当我专注于输入类型时它下面的错误信息应该消失的元素,问题是当我关注输入类型时错误信息隐藏所有。希望您能够帮助我。提前致谢

这是我的HTML结构

    <div class="form-group">
  <input class="form-control" type="text" />
  <div class="form-message">Please all fields  </div>
</div>
<div class="form-group">
  <input class="form-control" type="text" />
  <div class="form-message">Please all fields  </div>
</div>
<div class="form-group">
  <input class="form-control" type="text" />
  <div class="form-message">Please all fields  </div>
</div>
<div class="form-group">
  <input class="form-control" type="text" />
  <div class="form-message">Please all fields</div>
</div>
<div class="form-group">
  <input class="form-control" type="text" />
  <div class="form-message">Please all fields </div>
</div>

我的Jquery

$(document).ready(function() {
   $('.form-control').focus(function(e) {
           if($(e.target).next('.form-message').css('display') == 'block'){ 
                    $('.form-message').hide();          
         }
    }); 
});

2 个答案:

答案 0 :(得分:1)

试试这样:

$(document).ready(function() {
   $('.form-control').focus(function(e) {
         var formMessage = $(e.target).next('.form-message');
         if(formMessage.css('display') == 'block'){ 
               formMessage.hide();
         }
    }); 
});

小提琴:https://jsfiddle.net/gveukc0b/

答案 1 :(得分:0)

试试这个,

$(document).ready(function() {
$('.form-control').focus(function() {
        $(this).next().hide();
 }); 
});