单击时切换到其他按钮

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

小提琴演示

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';">

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

您可以在此处和此处查看这些解决方案的两个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' 。 如果将两个按钮都以默认static位置放置在div容器中，则两个按钮将出现在容器中的同一位置。

Answer 6

只需在jQuery中使用.toggle()

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

小提琴

Answer 7

我敢打赌，您的.toggle-radio-switch元素是同级的。 从您的代码中删除.parent（）。 由于.radio-switch-slider直接包含在.toggle-radio-switch中，因此不需要

$（本）.find（ '射频开关滑块'）

Answer 8

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

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

之后，把

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