點擊切換到不同的按鈕

我希望代碼切換按鈕。如果我第一次按下按鈕1，它必須顯示按鈕2，反之亦然。點擊切換到不同的按鈕

<input type="submit" value="asc" name="button1" id="but1"> 

<input type="submit" value="desc" name="button2" id="but3">

來源

2014-04-16 Piyush

您正在使用'類型= 「提交」'這將提交形式將代碼之後。你究竟想要達到什麼樣的目標？ – Satpal

你已經試過了什麼？ –

嘗試使用javascript .hide（）。 – Piyush

一個解決方案沒有需要JQuery的將是這樣一個：

<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.display='';this.style.display='none';"> 

<input type="button" value="desc" name="button2" id="but3" style="display:none;" onClick="document.getElementById('but1').style.display='';this.style.display='none';">

，如果你想使用的可視性也可以這樣來做：

<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.visibility='visible';this.style.visibility='hidden';"> 

<input type="button" value="desc" name="button2" id="but3" style="visibility:hidden;" onClick="document.getElementById('but1').style.visibility='visible';this.style.visibility='hidden';">

使用可視性保留按鈕位置。出於演示的原因，我將類型從提交改爲按鈕。

您可以查看這兩個解決方案的兩個JSFIDDLE演示here和here。

來源

2014-04-16 07:17:38 nbanic

不知道你想要什麼來實現的，但你可以用：

$('input[type="submit"]').click(function() { 
    $(this).hide().siblings('input[type="submit"]').show(); 
});

Fiddle Demo

來源

2014-04-16 07:12:42 Felix

謝謝你，這是我想要的，但它提交的形式，並重置爲orignal按鈕，我不明白該怎麼做。我想在同一個按鈕上單擊顯示asc和desc列表。 – Piyush

我不明白你的意思。你可以重述一下你的問題嗎？ – Felix

你可以試試下面的代碼：

$('input[type="submit"]').click(function(){ 
    var valueOfButton = $(this).val(); 
    if(valueOfButton == 'asc') 
    { 
     $('input[value="asc"]').show(); 
     $('input[value="desc"]').hide(); 
    } 
    else 
    { 
     $('input[value="desc"]').show(); 
     $('input[value="asc"]').hide(); 
    } 
});

來源

2014-04-16 07:15:22

嘗試使用以下功能：

$(element)click(callback)將處理的element
$(element).show()點擊會顯示element
$(element).hide()將隱藏element

所以森普爾代碼：

//first hidden the second button 
$('#but3').css('display','none') 

// handle click of first button 
$('#but1').click(function(){ 
    $(this).hide() 
    $('#but3').show() 
}); 

// handle click of second button 
$('#but3').click(function(){ 
    $(this).hide() 
    $('#but1').show() 
});

這裏是一個例子：http://jsfiddle.net/L7zux/1/

來源

2014-04-16 07:17:14

document.getElementById('but1').addEventListener('click', function() { 
    document.getElementById('but1').style.visibility = 'hidden'; 
    document.getElementById('but3').style.visibility = 'visible'; }, false); 

document.getElementById('but3').addEventListener('click', function() { 
    document.getElementById('but3').style.visibility = 'hidden'; 
    document.getElementById('but1').style.visibility = 'visible'; }, false);

如果你想完全隱藏按鈕及其佔位符，使用style.display = 'none'和style.display = 'block'。如果您將兩個按鈕放在div容器中，並且默認位置爲static，那麼這兩個按鈕將出現在容器中的相同位置。

來源

2014-04-16 07:18:54

問題標籤之一是'jQuery'，爲什麼使用純JS？ –

錯過了jQuery標籤。與您的代碼 –

，IE瀏覽器發生了什麼？ –

jQuery中

$('input[type="submit"]').click(function() { 
    $('input[type="submit"]').toggle(); 
});

Fiddle

來源

2014-04-16 07:20:25

我打賭你.toggle無線電開關元素是同級簡單地使用.toggle()。從代碼中刪除.parent（）。它不是必要的，因爲.radio開關滑塊在.toggle無線電開關直接包含

$（本）.find（「無線開關滑塊」）

來源

2014-04-16 07:22:39

檢查鏈接http://jsfiddle.net/amQCN/11/ –

默認情況下，當頁面將加載下面的代碼，以便您的第二個按鈕將被隱藏。

$(document).ready(function(e){ $('#but3').hide(); });

那名

$('input[type="submit"]').click(function() { $(this).hide().siblings('input[type="submit"]').show(); });

來源

2014-04-16 07:24:27 KinjalMistry

點擊切換到不同的按鈕

回答

相關問題