Question

点击我的按钮＆＃34;粉红色＆＃34;我想突出显示输入字段，里面没有任何文字：

＆＃13;

$("#highlight").click(function () {
  $('.form-group input').blur(function() {
   if (!$(this).val()) {
     $(this).parents('.form-group').addClass('has-error');
   }
  });
});

＆＃13;

.has-error {
  background-color: pink
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label>Input</label>
  <input type="text" id="input">
</div>

<div class="form-group">
  <label>Input</label>
  <input type="text" id="input" value="Some Text">
</div>

<button id="highlight">Make pink</button>

＆＃13;

不添加课程，我不知道为什么

Answer 1

这可能对您有帮助，

{{1}}

Answer 2

根据我的理解，您希望输入在您单击按钮后立即变为粉红色。但是，您的blur事件中嵌套了click个事件。这意味着一旦您单击该按钮，它就会将blur事件绑定到输入并等待该事件发生。因此，如果您单击该按钮，然后单击其中一个输入并单击，它将变为粉红色。

要在点击时立即发生这种情况，请删除该模糊事件并将其更改为类似的内容，即使用jQuery的each函数：

$("#highlight").click(function () {
  $('.form-group input').each(function() {
   if (!$(this).val()) {
     $(this).parents('.form-group').addClass('has-error');
   }
  });
});

Answer 3

我不确定，但我认为你必须这样检查

$(this).attr('value') === ''

Answer 4

选择'form-group'而不是仅选择其父级

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style>
    .has-error {
      background-color: pink
    }
    </style>
    <script>
    $(document).ready(function(){
      $('.form-group input').blur(function() {
      if (!$(this).val()) {
        $('.form-group').addClass('has-error');
      }
    });
    });
    </script>
    </head>
    <body>

    <div class="form-group">
      <label>Input</label>
      <input type="text" id="input">
    </div>

    <div class="form-group">
      <label>Input</label>
      <input type="text" id="input" value="Some Text">
    </div>
    </body>
    </html>

如何在所有内部都有空输入的表单组中添加一个类？

4 个答案: