Кнопка поиска jQuery

Question

Я использую старый код JavaScript, чтобы переключать кнопку поиска с поиска на поиск в моих формах следующим образом

<div id="search_clickable"> <input class="search" type="submit" value="search" onClick="javascript:flipSearchButton();"></div>
<div id="search_unclickable" class="hidden"><img src="/assets/img/searching.png" alt=""></div> 

Моя функция JavaScript

function flipSearchButton()

{
   document.getElementById('search_clickable').style.display = 'none';
   document.getElementById('search_unclickable').style.display = 'block';
}

Как мне добиться этого с помощью jQuery?

Answer 1

function flipSearchButton(){
    $('#search_clickable').hide(); // or - $('#search_clickable').toggle();
    $('#search_unclickable').show(); // or - $('#search_unclickable').toggle();
}

И прекратите использовать встроенный JavaScript:

$('.search').click(flipSearchButton);

Обратите внимание, что ваша кнопка поиска имеет тип submit (?!), Поэтому она отправит форму. Возможно, вы захотите изменить тип на button или вернуть false из обратного вызова:

function flipSearchButton(){
    $('#search_clickable').hide();
    $('#search_unclickable').show();
    return false;
}

Answer 2

Пожалуйста, смотрите ниже URL для переключения Div.

Проверьте ниже рабочие демонстрации

По вашему вопросу: Демо1
По моему мнению: Демо2

Спасибо

Answer 3

Вам даже не нужна отдельная функция:

$("input[type=submit").click(function() {
   $("#search_clickable").hide();
   $("#search_unclickable").show();
});

Или используйте идентификатор / класс кнопки отправки, если вы хотите на определенной кнопке:

$(".search").click(function() {
   $("#search_clickable").hide();
   $("#search_unclickable").show();
});

Answer 4

Вы также можете использовать эффект затухания, чтобы улучшить взаимодействие с пользователем

function flipSearchButton() 
{
  $('#search_unclickable').fadeIn('slow', function() {
    // Animation complete
  });
  $('#search_clickable').fadeOut('slow', function() {
    // Animation complete
  });
};

Answer 5

Я думал что-то вроде этого:

$("#search_clickable").click(function() {
  $("#search_clickable").hide();
  $("#search_unclickable").show();
});

, если вы хотите переключить этот элемент, используйте toggle () вместо hide () и show ().

Answer 6

включают jquery:

<script type="text/javascript" src="jquery.js"></script>

, затем:

function flipSearchButton()

{
   $('#search_clickable').hide();
   $('#search_unclickable').show();
}