jQuery的切换搜索按钮

我用旧的JavaScript代码来翻转从搜索我的搜索按钮，在我的搜索表单如下jQuery的切换搜索按钮

<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的？

来源

2012-03-16 gek

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

并停止使用内嵌的JavaScript：

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

请注意，您[R搜索按钮submit类型，因此它会提交表单，你可能想的类型更改为button或从回调返回false（？！）：

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

来源

2012-03-16 11:34:52 gdoron

是有道理的。如果我在页面上有多个搜索按钮的实例，那么它将起作用吗？或者我需要将div ID更改为类？ – gek 2012-03-16 12:00:52

@ AA1。这取决于你想要什么。我的代码将用'search class'为类添加'click'事件。如果你想定制它，你可以改变ID类或你想要什么都... – gdoron 2012-03-16 12:05:45

这部作品在我的搜索gif图片更换搜索按钮的条件，但不提交表单，什么都不会发生 – gek 2012-03-16 14:33:17

包括jQuery的：

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

则：

function flipSearchButton() 

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

来源

2012-03-16 11:34:27 mgraph

我想是这样的：

如果你想切换此元素，使用翻转（），而不是隐藏（）和show

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

（）。

来源

2012-03-16 11:35:27 dumP

大概在你隐藏包含按钮的股利，因此不能再使用点击切换（）是没有意义的:) – Deadlykipper 2012-03-16 12:10:42

你也可以考虑使用淡入淡出效果，以提高用户体验

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

来源

2012-03-16 11:45:58 antonjs

你甚至不需要一个单独的函数：

或者使用id /类的提交按钮如果你想上的特定按钮：

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

来源

2012-03-16 12:08:48 Deadlykipper

请参考以下网址进行切换股利。

检查工作演示

按你的问题如下：Demo1
按我意见：Demo2

感谢

来源

2012-03-16 12:11:25

jQuery的切换搜索按钮

回答

相关问题