Question

我有2个按钮。在一种情况下，第一个按钮是“禁用”＆＃39;在另一种情况下，它启用＆＃39;，但在一个按钮中没有显示样式display: none。

我在第一种情况下使用jQuery。我点击启用按钮并显示禁用按钮。下次禁用按钮隐藏并显示按钮启用的其他时间。

脚本无法正常工作，因为它在每种情况下只能运行一次并最终停止。

脚本是这样的：

jQuery(document).ready(function() {
    jQuery(".but_1").click(function() {
        jQuery(".but_1").hide("2"); 
        jQuery(".but_2").show("1").delay(1, function() {    
            jQuery(".but_2").hide("2");  
        });
        jQuery(".but_2").hide("2");     
        jQuery(".but_1").show("2");  
    });
});

这些按钮：

<input name="enviar" type="submit" disabled="disabled" id="c_input_submit" class="but_2" style="display:none;" value="Send Hide" />
<input name="enviar" type="submit" id="c_input_submit" class="but_1" value="Send Normal" />

感谢您的帮助。

Answer 1

这是否与您所寻找的一致？

https://jsfiddle.net/1zv3ty0u/

$(document).ready(function() {

    $(".but_1").click(function() {

        $(".but_1").hide(); 
        $(".but_2").show();
    });

    $(".but_2").click(function(){
        $(".but_2").hide();
        $(".but_1").show();
    });
});

和html：

<input name="enviar" type="submit" id="c_input_submit" class="but_2 
style="display:none;" value="Send Hide" />

<input name="enviar" type="submit" id="c_input_submit" 
class="but_1" value="Send Normal" />

顺便说一下，$()等于jQuery()，前者通常用于提高代码的可读性。

Answer 2

JSFiddle：https://jsfiddle.net/uqf0qhp6/

如果你的css中有一个名为hide的类，你可以很容易地做到这一点：

$('.but_1, .but_2').click(function(){
    $('.but_1, .but_2').toggleClass('hide');
 });

并且你的隐藏类只是：{display：none;}并且开始附加到其中一个按钮（无论你想成为默认状态）。

Answer 3

我认为这可能更接近您的要求：

<input class="js-btn-one" value="Button One" type="button" />
<input class="js-btn-two" value="Button Two" type="button" />

$(document).ready(function()
{
    $('.js-btn-two').hide();

    $('.js-btn-one').click(function()
    {
        $('.js-btn-two').show();
        if($('.js-btn-two').is(":visible"))
        {
            $('.js-btn-two').prop( "disabled", false );
        }

        $(this).prop( "disabled", true );
    });

    $('.js-btn-two').click(function()
    {
        $('.js-btn-one').prop( "disabled", false );
        $(this).prop( "disabled", true);
    });
});

每次点击都隐藏和显示按钮

3 个答案: