[英]Switch to different button on click
I want code to switch the buttons. 我想要代码来切换按钮。 If I pressed button1 first time, it must show button2 and vice versa.
如果我第一次按下button1,它必须显示button2,反之亦然。
<input type="submit" value="asc" name="button1" id="but1">
<input type="submit" value="desc" name="button2" id="but3">
Not sure what you're trying to achieve, but you can use: 不确定要达到的目标,但可以使用:
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});
You can try the code below: 您可以尝试以下代码:
$('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();
}
});
Try using the following functions: 尝试使用以下功能:
$(element)click(callback)
will handle the click of the element
$(element)click(callback)
将处理element
的点击 $(element).show()
will show the element
$(element).show()
将显示element
$(element).hide()
will hide the element
$(element).hide()
将隐藏element
so a semple code is: 所以一个简单的代码是:
//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()
});
Here is an example: http://jsfiddle.net/L7zux/1/ 这是一个示例: http : //jsfiddle.net/L7zux/1/
One solution without the need for JQuery would be this one: 无需 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';">
You can also do it this way if you want to use the visibility: 如果要使用可见性,也可以通过这种方式进行操作:
<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';">
Using visibility preserves the buttons position. 使用可见性可以保留按钮的位置。 I changed the type from submit to button just out of demonstration reasons.
出于演示原因,我将类型从提交更改为按钮。
You can look at both JSFIDDLE demos of these solutions here and here . 您可以在此处和此处查看这些解决方案的两个JSFIDDLE演示。
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);
If you want to hide button and its placeholder completely, use style.display = 'none'
and style.display = 'block'
. 如果要完全隐藏按钮及其占位符,请使用
style.display = 'none'
和style.display = 'block'
。 If you put both buttons in div
container with default static
positioning, then both buttons will appear at the same position in container. 如果将两个按钮都以默认
static
位置放置在div
容器中,则两个按钮将出现在容器中的同一位置。
I'm betting your .toggle-radio-switch elements are siblings. 我敢打赌,您的.toggle-radio-switch元素是同级的。 Remove .parent() from your code.
从您的代码中删除.parent()。 It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch
由于.radio-switch-slider直接包含在.toggle-radio-switch中,因此不需要
$(this).find('.radio-switch-slider') $(本).find( '射频开关滑块')
By default when page will load put following code so that your second button will be hide. 默认情况下,页面加载时将放置以下代码,以便隐藏第二个按钮。
$(document).ready(function(e){ $('#but3').hide(); });
After that Put code that were 之后,把
$('input[type="submit"]').click(function() { $(this).hide().siblings('input[type="submit"]').show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.