Question

我希望代码切换按钮。如果我第一次按下button1，它必须显示button2，反之亦然。

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

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

Answer 1

不确定您要尝试实现的目标，但您可以使用：

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

<强> Fiddle Demo

Answer 2

您可以尝试以下代码：

$('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();
    }
});

Answer 3

尝试使用以下功能：

$(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/

Answer 4

一个解决方案没有需要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';">

使用可见性可保留按钮位置。出于演示原因，我将类型从提交更改为按钮。

您可以查看这些解决方案here和here的两个JSFIDDLE演示。

Answer 5

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定位，则两个按钮都将显示在容器中的相同位置。

Answer 6

只需在jQuery中使用.toggle()

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

Fiddle

Answer 7

我打赌你的.toggle-radio-switch元素是兄弟姐妹。从代码中删除.parent（）。因为.radio-switch-slider直接包含在.toggle-radio-switch

中，所以不需要它。

$（本）.find（＆＃39; .radio开关滑块＆＃39）

Answer 8

默认情况下，当页面加载时会放入以下代码，以便隐藏第二个按钮。

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

之后放置

代码

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

单击时切换到不同的按钮

8 个答案: