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

包括jquery：

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

然后：

function flipSearchButton()

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

Answer 3

我认为是这样的：

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

如果您想切换此元素，请使用toggle（）而不是hide（）和show（）。

Answer 4

您还可以考虑使用淡入淡出效果来改善用户体验

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

Answer 5

您甚至不需要单独的功能：

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

如果您想使用特定按钮，请使用提交按钮的ID /类：

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

Answer 6

请参阅以下网址以切换Div。

检查以下工作演示

根据您的问题：Demo1
根据我的观点：Demo2

由于

jQuery切换搜索按钮

6 个答案: