javascript - 以类似于 hover() 方法的方式在焦点和模糊之间切换不起作用

Question

我正在使用 Bootstrap 4 开发一个有搜索栏的网站。

我想在两个事件之间切换focus并将blur其附加到#group-search input元素。我一直在寻找一种清晰简洁的方法来完成这项工作，就像该hover()方法有效：

$('#group-search input').hover(function() {
  $(this).closest('div').removeClass('dark');
}, function() {
  $(this).closest('div').addClass('dark');
});

#group-search {
  padding: 5px;
}

#group-search input:focus {
  outline: none !important;
  box-shadow: none;
}

#group-search.dark input,
#group-search.dark button {
  color: #444;
}

#group-search.dark button {
  border: none;
  background: #ddd;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div id="group-search" class="input-group dark <?php if(form_error('search')) echo 'has-error';?>">
  <input class="form-control form-control-dark" type="text" name="search" placeholder="Search posts..." aria-label="Search">
  <div class="input-group-append">
    <button class="btn btn-danger" type="submit">Search</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

令我惊讶的是，我使用focus和blur事件的方式不起作用。

$('#group-search input').on('focus', function() {
  $(this).closest('div').removeClass('dark');
}, 'blur', function() {
  $(this).closest('div').addClass('dark');
});

#group-search {
  padding: 5px;
}

#group-search input:focus {
  outline: none !important;
  box-shadow: none;
}

#group-search.dark input,
#group-search.dark button {
  color: #444;
}

#group-search.dark button {
  border: none;
  background: #ddd;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div id="group-search" class="input-group dark <?php if(form_error('search')) echo 'has-error';?>">
  <input class="form-control form-control-dark" type="text" name="search" placeholder="Search posts..." aria-label="Search">
  <div class="input-group-append">
    <button class="btn btn-danger" type="submit">Search</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

我的错误在哪里？

标签： javascriptjquery

Answer 1

您的语法错误，这是您应该如何使用它

$('#group-search input').on({
    focus: function() {
        $(this).closest('div').removeClass('dark');
    },
    blur: function() {
        $(this).closest('div').addClass('dark');
    }
});

#group-search {
  padding: 5px;
}

#group-search input:focus {
  outline: none !important;
  box-shadow: none;
}

#group-search.dark input,
#group-search.dark button {
  color: #444;
}

#group-search.dark button {
  border: none;
  background: #ddd;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div id="group-search" class="input-group dark <?php if(form_error('search')) echo 'has-error';?>">
  <input class="form-control form-control-dark" type="text" name="search" placeholder="Search posts..." aria-label="Search">
  <div class="input-group-append">
    <button class="btn btn-danger" type="submit">Search</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

见这里：https ://learn.jquery.com/events/handling-events/#many-events-and-handlers