使用 jquery 隱藏和顯示按鈕點擊的 div

Question

這是我使用的代碼。 這個想法是有一個“后退按鈕”。 我也嘗試過使用 show() 和 hide() 。

要求是在單擊后退按鈕時顯示上一個屏幕，但由於某種原因沒有顯示任何內容。

每當我單擊“返回”按鈕時，它應該顯示上一個屏幕，但它不起作用。 我最初使用show()和hide() function 不起作用，所以我使用了display:block和display:none屬性，但在這兩種情況下結果都是一樣的。

我似乎沒有注意到我錯過了什么。

ps：我是 jquery 的新手。

 function showmeme() { $("#b_game").css("display", "none"); $("#b_meme").css("display", "none"); $("#memes").css("width", "100%"); $("#game").css("width", "0%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); document.getElementById('memes').innerHTML = `<p class="display">You opened meme section<p> <br class="display"> <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`; } function showgame() { $("#b_game").css("display", "none"); $("#b_meme").css("display", "none"); $("#memes").css("width", "0%"); $("#game").css("width", "100%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); document.getElementById('game').innerHTML = `<p class="display">You opened meme section<p> <br class="display"> <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`; } function back() { $("#memes").css("width", "49%"); $("#game").css("width", "49%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); $("#b_game").css("display", "block"); $("#b_meme").css("display", "block"); $(".display").css("display", "none"); }

 .body { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.memes { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid black; width: 49%; height: 560px; overflow: hidden; }.game { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid black; width: 49%; height: 560px; overflow: hidden; }.butn { width: 200px; height: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <div class="memes" id="memes"> <button id="b_meme" class="butn" onclick="showmeme()"> make a meme </button> </div> <div class="game" id="game"> <button id="b_game" class="butn" onclick="showgame()"> play meme games </button> </div> </div>

Answer 1

雖然我認為將純 css 用於 animation 部分和隱藏/顯示部分會更容易和更好。 但是您可以使用.insertAdjacentHtml()

document.getElementById('b_meme').insertAdjacentHTML('afterend', `<p class="display">You opened meme section<p>
  <br class="display">
  <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`);

演示

 function showmeme() { $("#b_game").css("display", "none"); $("#b_meme").css("display", "none"); $("#memes").css("width", "100%"); $("#game").css("width", "0%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); document.getElementById('b_meme').insertAdjacentHTML('afterend', `<p class="display">You opened meme section<p> <br class="display"> <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`); } function showgame() { $("#b_game").css("display", "none"); $("#b_meme").css("display", "none"); $("#memes").css("width", "0%"); $("#game").css("width", "100%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); document.getElementById('b_game').insertAdjacentHTML('afterend', `<p class="display">You opened meme section<p> <br class="display"> <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`); } function back() { $("#memes").css("width", "49%"); $("#game").css("width", "49%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); $("#b_game").css("display", "block"); $("#b_meme").css("display", "block"); $(".display").css("display", "none"); }

 .body { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.memes { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid black; width: 49%; height: 560px; overflow: hidden; }.game { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid black; width: 49%; height: 560px; overflow: hidden; }.butn { width: 200px; height: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <div class="memes" id="memes"> <button id="b_meme" class="butn" onclick="showmeme()"> make a meme </button> </div> <div class="game" id="game"> <button id="b_game" class="butn" onclick="showgame()"> play meme games </button> </div> </div>