Скрыть и показать кнопку в каждом клике

Question

У меня есть 2 кнопки. В одном случае первая кнопка «отключена», а в другом случае это «включить», но в одной кнопке нет шоу со стилем display: none.

Я использую jQuery для в первом случае. Я нажимаю кнопку включения и показываю кнопку отключения. В следующий раз, когда кнопка отключения отключится и покажет другое время, нажмите кнопку.

Сценарий работает неправильно, потому что он работает только один раз в каждом случае и, наконец, останавливается.

У меня есть ссылка для тестирования: https://jsfiddle.net/onfynvfk/5/

Сценарий таков:

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, названный шкура, вы можете сделать это очень легко:

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

и ваша шкура класс будет просто: {дисплей: нет;} и начните с присоединения к одной из кнопок (в зависимости от того, что вы хотите быть по умолчанию).

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