单击时我想显示按钮，再次单击时我想隐藏一个按钮

Question

我不确定，我应该使用什么，请帮助

 $(document).ready(function() { $('#btn2').hide() $("#btn1").click(function () { $("#btn2").show() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="btn1">BTN 1</button> <button id="btn2">BTN 2</button> </div>

Answer 1

 $(document).ready(function() { $('#btn2').hide() $("#btn1").click(function () { $("#btn2").toggle() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="btn1">BTN 1</button> <button id="btn2">BTN 2</button> </div>

Answer 2

您可以使用切换https://api.jquery.com/toggle/

 $(document).ready(function() { $('#btn2').hide() $("#btn1").click(function () { $("#btn2").toggle() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="btn1">BTN 1</button> <button id="btn2">BTN 2</button> </div>

Answer 3

将其隐藏在 HTML 或 CSS 中，然后切换它

 $(function() { $("#btn1").on("click", function() { $("#btn2").toggle() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="btn1">BTN 1</button> <button id="btn2" hidden>BTN 2</button> </div>

Answer 4

您应该使用$("#btn2").toggle()而不是$("#btn2").show() ，或者您可以添加 if 条件来检查按钮是否可见。