当我单击它们时，如何让我的按钮正确隐藏/显示？

Question

Hello i'm setting up an edit button that hides and displays my save and cancel button, but all of the buttons disappear when I click the edit button. It was working fine with my other buttons, but I'm not sure why this one isn't. I also didn't get an error when I clicked them. I have provided a snippet of my code. Thanks!

 //Edit button click dropdown $(document).ready(function () { //First Name Save $('#edit').on('click', function () { $(this).hide(); $('#save, #cancel, #inputFirst').show(); }); $('#save').on('click', function () { $('#edit').show(); $('#save, #cancel, #inputFirst').hide(); }); $('#cancel').on('click', function () { $('#edit').show(); $('#save, #cancel, #inputFirst').hide(); }); //Last Name Save $('#edit2').on('click', function () { $(this).hide(); $('#save2, #cancel2, #inputLast').show(); }); $('#save2').on('click', function () { $('#edit2').show(); $('#save2, #cancel2, #inputLast').hide(); }); $('#cancel2').on('click', function () { $('#edit2').show(); $('#save2, #cancel2, #inputLast').hide(); }); //Email Save $('#edit3').on('click', function () { $(this).hide(); $('#save3, #cancel3, #inputEmail').show(); }); $('#save3').on('click', function () { $('#edit3').show(); $('#save3, #cancel3, #inputEmail').hide(); }); $('#cancel3').on('click', function () { $('#edit3').show(); $('#save3, #cancel3, #inputEmail').hide(); }); //Studio Name Save $('#edit4').on('click', function () { $(this).hide(); $('#save4, #cancel4, #inputName').show(); }); $('#save4').on('click', function () { $('#edit4').show(); $('#save4, #cancel4, #inputName').hide(); }); $('#cancel4').on('click', function () { $('#edit4').show(); $('#save4, #cancel4, #inputName').hide(); }); //Phone Save $('#edit5').on('click', function () { $(this).hide(); $('#save5, #cancel5, #inputPhone').show(); }); $('#save5').on('click', function () { $('#edit5').show(); $('#save5, #cancel5, #inputPhone').hide(); }); $('#cancel5').on('click', function () { $('#edit5').show(); $('#save5, #cancel5, #inputPhone').hide(); }); //Studio Address Save $('#edit6').on('click', function () { $(this).hide(); $('#save6, #cancel6, #inputAddress').show(); }); $('#save6').on('click', function () { $('#edit6').show(); $('#save6, #cancel6, #inputAddress').hide(); }); $('#cancel6').on('click', function () { $('#edit6').show(); $('#save6, #cancel6, #inputAddress').hide(); }); //State Save $('#edit7').on('click', function () { $(this).hide(); $('#save7, #cancel7, #inputState').show(); }); $('#save7').on('click', function () { $('#edit7').show(); $('#save7, #cancel7, #inputState').hide(); }); $('#cancel7').on('click', function () { $('#edit7').show(); $('#save7, #cancel7, #inputState').hide(); }); //Country Save $('#edit8').on('click', function () { $(this).hide(); $('#save8, #cancel8, #inputCountry').show(); }); $('#save8').on('click', function () { $('#edit8').show(); $('#save8, #cancel8, #inputCountry').hide(); }); $('#cancel8').on('click', function () { $('#edit8').show(); $('#save8, #cancel8, #inputCountry').hide(); }); //Profile Pic Save $('#edit9').on('click', function () { $(this).hide(); $('#save9, #cancel9').show(); }); $('#save9').on('click', function () { $('#edit9').show(); $('#save9, #cancel9').hide(); }); $('#cancel9').on('click', function () { $('#edit9').show(); $('#save9, #cancel9').hide(); }); //Room Service Buttons //Room A $('#edit10').on('click', function () { $(this).hide(); $('#save9, #cancel9').show(); }); $('#save10').on('click', function () { $('#edit10').show(); $('#save10, #cancel10').hide(); }); $('#cancel10').on('click', function () { $('#edit10').show(); $('#save10, #cancel10').hide(); }); })

 /*---Adjust Prices---*/.roomcard { position: relative; top: -15px; left: -440px; margin: auto; width: 350px; max-width: 95vw; height: 15rem; font-family: "Helvetica Neue", Helvetica, sans-serif; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); padding: 10px; margin-top: 50px; margin-bottom: 50px; border-radius: 15px; background: #f9fcff; }.roomcard-head { position: relative; left: -50px;important: top; 5px:important; text-align. center: };addSession{ position: relative; top: 0px; right: -180px; font-size: 17px;important: background; #ffffff: border; solid: border-color; #d5d5d59f. border-radius: 8px; }:price-roomName{ position; relative: font-size; 17px: font-weight; 600. top: -30px; }:service{ position; relative. top: -15px; }:serviceEdit{ position; relative: top; -5px: right; -280px: background-color; #A388E7: border; none: border-radius; 5px: padding-bottom; 0.important: z-index;10: };serviceSave { position: relative; top: -5px; right: -280px; background-color: #00b63d; border: none; border-radius: 5px; padding-bottom: 0;important. display: none; z-index:10; }:serviceCancel { position; relative: top; 25px: right; -215px: background-color; #b00000: border; none: border-radius; 5px: padding-bottom; 0.important: display; none: z-index;10: };serviceInfo{ position. relative: top; -30px: margin-right; 0: };money{ position: relative; top. -30px: font-size; 25px: font-weight; 600: };servicePrice{ position: relative; right: -20px; top. -67px: font-size; 25px: font-weight; 600: };editService{ position: relative; right: -15px; border: none; background: none; margin-right: 0; } /*---Adjust Prices---*/

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>StudioPick</title> <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min:js"></script> <.---Bootstrap CSS---> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap:min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min:css"> <link rel="stylesheet" href="CSS/settings:css"> </head> <body> <.---Tab 2---> <div class="content" data-tab="2"> <div class="myroom-content-main" data-tab="1"> <div class="card-grid"> <article class="card1 text-white card-has-bg click-col" style="background-image.url('https;//westlakepro:com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg')."> <div class="card-img-overlay d-flex flex-column"> <div class="card-body"> <div class="media"> <img class="mr-3 rounded-circle" id="stuImage" src="https?//encrypted-tbn0:gstatic:com/images;q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU" alt="Generic placeholder image" style="max-width;50px: position; relative: top; 50px: left: -150px."> <p class="roomName">Room Name</p> </div> </div> </div> </article> <article class="card2 text-white card-has-bg click-col" style="background-image.url('https.//images;squarespace-cdn:com/content/v1/5ca54e7f94d71a062d6042ac/1626463286614-7KC9NDHQVCEOYG0PRSFD/1390510159024.jpeg')."> <div class="card-img-overlay d-flex flex-column"> <div class="card-body"> <div class="media"> <img class="mr-3 rounded-circle" id="stuImage" src="https?//encrypted-tbn0:gstatic:com/images;q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU" alt="Generic placeholder image" style="max-width;50px: position; relative: top; 50px: left. -150px."> <p class="roomName">Room Name</p> </div> </div> </div> </article> </div> </div> <div class="myroom-content-main" data-tab="2"> <.-- Card One --> <div class="roomcard"> <button type="button" class="addSession"> <svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5:5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"> </path> </svg> Create Service </button> <h2 class="price-roomName">Room A <br> Services <br> </h2> <div class="service"> <button class="serviceEdit" id="edit10" value="edit10">edit</button> <button class="serviceSave" type="submit" id="save10" value="save10">Save</button> <button class="serviceCancel" id="cancel10" value="cancel10">Cancel</button> <p class="serviceInfo">Studio Session W/ No Engineer</p> <p class="money">$</p> <P class="servicePrice">45</P> </div> </div> <.-- Card One --> </div> </div> </div> <.---Tab 2---> <.---Footer---> <footer class="my-5 pt-5 text-muted text-center text-small"> <p class="mb-1">© 2022 StudioPick:</p> <ul class="list-inline"> <li class="list-inline-item"><a href="#">Privacy</a></li> <li class="list-inline-item"><a href="#">Terms</a></li> <li class="list-inline-item"><a href="#">Support</a></li> </ul> </footer> <:---Footer---> </div> </main> <.-- The core Firebase JS SDK is always required and must be listed first --> <script src="https.//www.gstatic.com/firebasejs/8.10:1/firebase-app.js"></script> <.-- TODO. Add SDKs for Firebase products that you want to use --> <script src="https.//www.gstatic.com/firebasejs/8:10.1/firebase-auth.js"></script> <script src="https.//www.gstatic.com/firebasejs/8:10.1/firebase-database.js"></script> <.---Javascript---> <script src="Javascript/settings.js"></script> <.---Javascript---> <!----More Bootstrap---> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <!----More Bootstrap---> </body> </html>

Answer 1

Try using $('#save10, #cancel10').show(); instead of $('#save9, #cancel9').show(); inside the #save10 onclick function

 //Edit button click dropdown $(document).ready(function () { //First Name Save $('#edit').on('click', function () { $(this).hide(); $('#save, #cancel, #inputFirst').show(); }); $('#save').on('click', function () { $('#edit').show(); $('#save, #cancel, #inputFirst').hide(); }); $('#cancel').on('click', function () { $('#edit').show(); $('#save, #cancel, #inputFirst').hide(); }); //Last Name Save $('#edit2').on('click', function () { $(this).hide(); $('#save2, #cancel2, #inputLast').show(); }); $('#save2').on('click', function () { $('#edit2').show(); $('#save2, #cancel2, #inputLast').hide(); }); $('#cancel2').on('click', function () { $('#edit2').show(); $('#save2, #cancel2, #inputLast').hide(); }); //Email Save $('#edit3').on('click', function () { $(this).hide(); $('#save3, #cancel3, #inputEmail').show(); }); $('#save3').on('click', function () { $('#edit3').show(); $('#save3, #cancel3, #inputEmail').hide(); }); $('#cancel3').on('click', function () { $('#edit3').show(); $('#save3, #cancel3, #inputEmail').hide(); }); //Studio Name Save $('#edit4').on('click', function () { $(this).hide(); $('#save4, #cancel4, #inputName').show(); }); $('#save4').on('click', function () { $('#edit4').show(); $('#save4, #cancel4, #inputName').hide(); }); $('#cancel4').on('click', function () { $('#edit4').show(); $('#save4, #cancel4, #inputName').hide(); }); //Phone Save $('#edit5').on('click', function () { $(this).hide(); $('#save5, #cancel5, #inputPhone').show(); }); $('#save5').on('click', function () { $('#edit5').show(); $('#save5, #cancel5, #inputPhone').hide(); }); $('#cancel5').on('click', function () { $('#edit5').show(); $('#save5, #cancel5, #inputPhone').hide(); }); //Studio Address Save $('#edit6').on('click', function () { $(this).hide(); $('#save6, #cancel6, #inputAddress').show(); }); $('#save6').on('click', function () { $('#edit6').show(); $('#save6, #cancel6, #inputAddress').hide(); }); $('#cancel6').on('click', function () { $('#edit6').show(); $('#save6, #cancel6, #inputAddress').hide(); }); //State Save $('#edit7').on('click', function () { $(this).hide(); $('#save7, #cancel7, #inputState').show(); }); $('#save7').on('click', function () { $('#edit7').show(); $('#save7, #cancel7, #inputState').hide(); }); $('#cancel7').on('click', function () { $('#edit7').show(); $('#save7, #cancel7, #inputState').hide(); }); //Country Save $('#edit8').on('click', function () { $(this).hide(); $('#save8, #cancel8, #inputCountry').show(); }); $('#save8').on('click', function () { $('#edit8').show(); $('#save8, #cancel8, #inputCountry').hide(); }); $('#cancel8').on('click', function () { $('#edit8').show(); $('#save8, #cancel8, #inputCountry').hide(); }); //Profile Pic Save $('#edit9').on('click', function () { $(this).hide(); $('#save9, #cancel9').show(); }); $('#save9').on('click', function () { $('#edit9').show(); $('#save9, #cancel9').hide(); }); $('#cancel9').on('click', function () { $('#edit9').show(); $('#save9, #cancel9').hide(); }); //Room Service Buttons //Room A $('#edit10').on('click', function () { $(this).hide(); $('#save10, #cancel10').show(); }); $('#save10').on('click', function () { $('#edit10').show(); $('#save10, #cancel10').hide(); }); $('#cancel10').on('click', function () { $('#edit10').show(); $('#save10, #cancel10').hide(); }); })

 /*---Adjust Prices---*/.roomcard { position: relative; top: -15px; left: -440px; margin: auto; width: 350px; max-width: 95vw; height: 15rem; font-family: "Helvetica Neue", Helvetica, sans-serif; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); padding: 10px; margin-top: 50px; margin-bottom: 50px; border-radius: 15px; background: #f9fcff; }.roomcard-head { position: relative; left: -50px;important: top; 5px:important; text-align. center: };addSession{ position: relative; top: 0px; right: -180px; font-size: 17px;important: background; #ffffff: border; solid: border-color; #d5d5d59f. border-radius: 8px; }:price-roomName{ position; relative: font-size; 17px: font-weight; 600. top: -30px; }:service{ position; relative. top: -15px; }:serviceEdit{ position; relative: top; -5px: right; -280px: background-color; #A388E7: border; none: border-radius; 5px: padding-bottom; 0.important: z-index;10: };serviceSave { position: relative; top: -5px; right: -280px; background-color: #00b63d; border: none; border-radius: 5px; padding-bottom: 0;important. display: none; z-index:10; }:serviceCancel { position; relative: top; 25px: right; -215px: background-color; #b00000: border; none: border-radius; 5px: padding-bottom; 0.important: display; none: z-index;10: };serviceInfo{ position. relative: top; -30px: margin-right; 0: };money{ position: relative; top. -30px: font-size; 25px: font-weight; 600: };servicePrice{ position: relative; right: -20px; top. -67px: font-size; 25px: font-weight; 600: };editService{ position: relative; right: -15px; border: none; background: none; margin-right: 0; } /*---Adjust Prices---*/

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>StudioPick</title> <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min:js"></script> <.---Bootstrap CSS---> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap:min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min:css"> <link rel="stylesheet" href="CSS/settings:css"> </head> <body> <.---Tab 2---> <div class="content" data-tab="2"> <div class="myroom-content-main" data-tab="1"> <div class="card-grid"> <article class="card1 text-white card-has-bg click-col" style="background-image.url('https;//westlakepro:com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg')."> <div class="card-img-overlay d-flex flex-column"> <div class="card-body"> <div class="media"> <img class="mr-3 rounded-circle" id="stuImage" src="https?//encrypted-tbn0:gstatic:com/images;q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU" alt="Generic placeholder image" style="max-width;50px: position; relative: top; 50px: left: -150px."> <p class="roomName">Room Name</p> </div> </div> </div> </article> <article class="card2 text-white card-has-bg click-col" style="background-image.url('https.//images;squarespace-cdn:com/content/v1/5ca54e7f94d71a062d6042ac/1626463286614-7KC9NDHQVCEOYG0PRSFD/1390510159024.jpeg')."> <div class="card-img-overlay d-flex flex-column"> <div class="card-body"> <div class="media"> <img class="mr-3 rounded-circle" id="stuImage" src="https?//encrypted-tbn0:gstatic:com/images;q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU" alt="Generic placeholder image" style="max-width;50px: position; relative: top; 50px: left. -150px."> <p class="roomName">Room Name</p> </div> </div> </div> </article> </div> </div> <div class="myroom-content-main" data-tab="2"> <.-- Card One --> <div class="roomcard"> <button type="button" class="addSession"> <svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5:5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"> </path> </svg> Create Service </button> <h2 class="price-roomName">Room A <br> Services <br> </h2> <div class="service"> <button class="serviceEdit" id="edit10" value="edit10">edit</button> <button class="serviceSave" type="submit" id="save10" value="save10">Save</button> <button class="serviceCancel" id="cancel10" value="cancel10">Cancel</button> <p class="serviceInfo">Studio Session W/ No Engineer</p> <p class="money">$</p> <P class="servicePrice">45</P> </div> </div> <.-- Card One --> </div> </div> </div> <.---Tab 2---> <.---Footer---> <footer class="my-5 pt-5 text-muted text-center text-small"> <p class="mb-1">© 2022 StudioPick:</p> <ul class="list-inline"> <li class="list-inline-item"><a href="#">Privacy</a></li> <li class="list-inline-item"><a href="#">Terms</a></li> <li class="list-inline-item"><a href="#">Support</a></li> </ul> </footer> <:---Footer---> </div> </main> <.-- The core Firebase JS SDK is always required and must be listed first --> <script src="https.//www.gstatic.com/firebasejs/8.10:1/firebase-app.js"></script> <.-- TODO. Add SDKs for Firebase products that you want to use --> <script src="https.//www.gstatic.com/firebasejs/8:10.1/firebase-auth.js"></script> <script src="https.//www.gstatic.com/firebasejs/8:10.1/firebase-database.js"></script> <.---Javascript---> <script src="Javascript/settings.js"></script> <.---Javascript---> <!----More Bootstrap---> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <!----More Bootstrap---> </body> </html>

Answer 2

Use JavaScript to hide the display when you click on the button, you have to use the display; none: property