單擊后如何使按鈕消失？

Question

這是我的代碼。 https://jsfiddle.net/3phzezfj/3/

function showhidediv(rad){
var rads=document.getElementsByName(rad.name);
document.getElementById('one').style.display=(rads[0].checked)?'block':'none' ;
document.getElementById('two').style.display=(rads[1].checked)?'block':'none' ;
document.getElementById('three').style.display=(rads[2].checked)?'block':'none' ;
    document.getElementById('four').style.display=(rads[3].checked)?'block':'none' ;
}

function switchVisible()

    {
      $("#newpost").hide();
      $("#newpost2").show();
    }

    function previousVisible()
    {
     $("#newpost").show();
        $("#newpost2").hide();
    } 

單擊后如何使下一個按鈕消失，但是如果按回去，它將重新出現？

謝謝。

Answer 1

您可以使用toggle（）;

描述：顯示或隱藏匹配的元素。

$("#newpost2").toggle();

如果＃newpost2隱藏，它將顯示它；如果顯示，它將隱藏它。

Answer 2

代替onclick將addEventListener用於click事件。
我已編輯您的代碼在這里codepen

而且您不必像這樣混合js和jquery
document.getElementById('four')和$("#newpost")
最好決定要使用哪一個

Answer 3

您的小提琴沒有包含jquery js。

請在這里檢查更新的小提琴。

如下所示附加事件處理程序。

$("#btnBack").click(previousVisible);
$("#btnNext").click(switchVisible);

並在div中移動了下一步按鈕。

希望這是您想要實現的目標。

Answer 4

我想這就是你想要的嗎？

 var check = 0; $(document).ready(function() { $("#Button1").click(function() { if(check == 0) { $("#Button1").hide(); } }); $("#Button2").click(function() { if(check == 0) { $("#Button1").show(); } }); }); 

 .btnSubmit { background-color: #7f0000; background-image: -webkit-linear-gradient(top, #7f0000, #6c0404); background-image: -moz-linear-gradient(top, #7f0000, #6c0404); background-image: -o-linear-gradient(top, #7f0000, #6c0404); background-image: -ms-linear-gradient(top, #7f0000, #6c0404); background-image: linear-gradient(top, #7f0000, #6c0404); border: 0; text-transform: uppercase; color: white; font-size: 14px; font-weight: bolder !important; height: 42px; padding: 0 20px; margin: 0; text-shadow: -1px -1px 2px 2px #000, 1px 1px 2px 2px #aa4242; border-bottom: 1px solid #383838; font-family: garamond, serif; text-shadow: 1px -1px 0px #090909; width: 150px; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid eightwidth" align="center" style="background-color: #282828; padding: 1px; padding-bottom: 0px;" id="disappear"> <button class="btn btnSubmit" id="Button1" type="button" value="Click">NEXT</button> <button class="btn btnSubmit" id="Button2" type="button" value="Click">Appear</button> </div> 

Answer 5

按鈕消失！

 $("#next").click(function(){ $("#next").hide(); $("#back").show(); }); $("#back").click(function() { $("#back").show(); $("#next").show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <input type="button" id="next" value="Next"/> <input type="button" id="back" value="Back"/>