时间戳

首页 > 解决方案 > 清空班级的问题

jquery - 清空班级的问题

问题描述

当用户在搜索栏中输入内容时，我试图清空 .scrolling-box 类。当我运行它时，该类会在一瞬间清空，但随后一切又出现了，我不知道为什么？这是我得到的代码：

$(document).ready(function(){
        $('#searchbutton').click(function(){
            displayHotels();
        });
        function displayHotels(){
            var location = $('#searchbar');
            location.focus();
            if(location.val() != ""){
                $('.scrolling-box').empty();
            }
        }
});

html:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script src="script.js"></script>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <form class="form-inline my-2 my-lg-0" id="firstBar">
                <input type="search" placeholder="Search" aria-label="Search" id="searchbar">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="searchbutton">Search</button>
            </form>

            <div class="scrolling-box">
                <img src="review1.jpg" alt="review1">
            </div>
        </body>
    </html>

标签： jquery

解决方案

因为您的按钮类型是提交，当表单提交时，页面将重新加载。因此用于event.preventDefault() 防止页面在按钮单击事件时重新加载。您也可以通过将按钮类型更改为submit来解决此问题button。检查工作片段。

var $ = jQuery;
$(document).ready(function() {
  $('#searchbutton').click(function() {
    event.preventDefault();
    displayHotels();
  });
});

function displayHotels() {
  var location = $('#searchbar');
  location.focus();
  if (location.val() != "") {
    $('.scrolling-box').empty();
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <form class="form-inline my-2 my-lg-0" id="firstBar">
    <input type="search" placeholder="Search" aria-label="Search" id="searchbar">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="searchbutton">Search</button>
  </form>

  <div class="scrolling-box">
    <img src="review1.jpg" alt="review1">
  </div>
</body>

</html>

推荐阅读