Проблема с опорожнением класса - PullRequest
Новая
       1

Проблема с опорожнением класса

0 голосов
/ 29 февраля 2020

Я пытаюсь очистить класс .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>

1 Ответ

0 голосов
/ 29 февраля 2020

Поскольку вы нажимаете кнопку «Отправить», а при отправке формы страница будет отображаться. поэтому используйте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...