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的切換搜索按鈕

回答

相關問題