刪除了類並希望將其添加回來
[英]removed Class and want to add it back
問題描述
我編寫了一個簡單的javascript“清除購物清單”代碼。
我能夠刪除購物清單並添加兩條消息：一個說購物清單已被清除，另一個彈出一個按鈕，詢問是否有誤，您想撤消更改。
現在我的問題是，當您按下“撤消”按鈕時，該類不會被添加回來。
// javascript var shoppingList = document.querySelector(".shoppingCart"); var toggleButton = document.querySelector("button.showList"); var clearedBox = document.querySelector(".clearedBox"); var clearedUndo = document.querySelector("button.clearedUndo"); //Toggle Shopping Cart toggleButton.addEventListener("click", () => { shoppingList.remove(".shoppingCart"); clearedBox.style.display = "block"; toggleButton.remove("button.showList"); }); //Undo Removal clearedUndo.addEventListener("click", () => { clearedUndo.createClass(".shoppingCart"); });
html, body { margin: 0; padding: 0; margin-left:30px; } .clearedBox { display:none; } .clearedMessage { background:#D66A68; color: white; padding:10px; width:260px; text-align:center; border-radius:10px; } .clearedUndo { background:#1C77C3; color: white; padding:5px; width:225px; border-radius:5px; text-align:center; font-size:12px; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <h1>index.html</h1> <button class="showList">Show</button> <div class="shoppingCart"> <ul> <li>Milk</li> <li>Eggs</li> <li>Juice</li> <li>Pasta</li> <li>Water</li> <li>Donuts</li> </ul> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p> </div> <div class="clearedBox"> <p class="clearedMessage">Your Shopping cart is now cleared!</p> <button class="clearedUndo">Accidental? Undo your change!</button> </div> <script src="index.js"></script> </body> </html>
我認為這部分是錯誤的：
//Undo Removal
clearedUndo.addEventListener("click", () => {
clearedUndo.createClass(".shoppingCart");
});
2 個解決方案
解決方案1
0 2020-01-22 08:29:17
問題
- 不要使用
elem.remove。因為如果您撤消操作，則不存在任何元素。或者，您可以使用elem.classList.toggle
// javascript var shoppingList = document.querySelector(".shoppingCart"); var toggleButton = document.querySelector("button.showList"); var clearedBox = document.querySelector(".clearedBox"); var clearedUndo = document.querySelector("button.clearedUndo"); //Toggle Shopping Cart toggleButton.addEventListener("click", () => { shoppingList.classList.toggle('hide') clearedBox.classList.toggle('show') //toggleButton.remove("button.showList"); }); //Undo Removal clearedUndo.addEventListener("click", () => { shoppingList.classList.toggle('hide') clearedBox.classList.toggle('show') });
html, body { margin: 0; padding: 0; margin-left: 30px; } .clearedBox { display: none; } .hide{ display: none; } .show{ display: block; } .clearedMessage { background: #D66A68; color: white; padding: 10px; width: 260px; text-align: center; border-radius: 10px; } .clearedUndo { background: #1C77C3; color: white; padding: 5px; width: 225px; border-radius: 5px; text-align: center; font-size: 12px; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <h1>index.html</h1> <button class="showList">Show</button> <div class="shoppingCart"> <ul> <li>Milk</li> <li>Eggs</li> <li>Juice</li> <li>Pasta</li> <li>Water</li> <li>Donuts</li> </ul> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p> </div> <div class="clearedBox"> <p class="clearedMessage">Your Shopping cart is now cleared!</p> <button class="clearedUndo">Accidental? Undo your change!</button> </div> <script src="index.js"></script> </body> </html>
解決方案2
0 已采納 2020-01-22 08:30:41
一旦你刪除它，它就消失了，如果你想用 JavaScript 把它放回去，那么所有的標記真的需要重新插入，所以我會考慮根據需要隱藏和顯示元素，通過將 JS 更改為此：
var shoppingList = document.querySelector(".shoppingCart");
var toggleButton = document.querySelector("button.showList");
var clearedBox = document.querySelector(".clearedBox");
var clearedUndo = document.querySelector("button.clearedUndo");
//Toggle Shopping Cart
toggleButton.addEventListener("click", () => {
shoppingList.style.display = "none";
clearedBox.style.display = "block";
toggleButton.style.display = "none";
});
//Undo Removal
clearedUndo.addEventListener("click", () => {
shoppingList.style.display = "block";
clearedBox.style.display = "none";
toggleButton.style.display = "block";
});
滾動回到頂部並移除 class 時跳轉動畫元素
[英]Jumping animated element when scroll is back to the top and class is removed
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.