[英]How to change large sections of HTML without using “innerHTML”
這是我所擁有的一個例子：
<body> Pick a food: <select class="food"> <option value="pizza"> Pizza </option> <option value="Hamburger"> Hamburger </option> </select> <br> <h1>If answer is pizza:</h1> <div class="pizza"> Select 2 toppings: <select name="topp1"> <option value="pepperoni"> Pepperoni </option> <option value="mushroom"> Mushroom </option> <option value="bell"> Bell Pepper </option> </select> <select name="topp2"> <option value="mushroom"> Mushroom </option> <option value="pepperoni"> Pepperoni </option> <option value="bell"> Bell Pepper </option> </select> </div> <h1>If answer is Hamburger:</h1> <div class="hamburger"> Select 2 fillings: <select name="fill1"> <option value="lettuce"> Lettuce </option> <option value="tomato"> Tomato </option> <option value="bacon"> Bacon </option> </select> <select name="fill2"> <option value="tomato"> Tomato </option> <option value="lettuce"> Lettuce </option> <option value="bacon"> Bacon </option> </select> </div> <body>
我想要做的是在"pizza"是.food的值時讓.pizza div 顯示，並且在.hamburger div 中也發生同樣的情況。
我知道可以通過在 JavaScript 中設置單個 div 的innerHTML來做到這一點，但是當您想要更改更多內容時，這會變得非常乏味。 我也嘗試過 CSS visibility屬性，但這只會使 div 中的一個不可見，而將另一個保持在原處。
正如您現在可能已經猜到的那樣，我正在尋求一種在頁面上的單個點輕松交換多個 div 的方法。
您可以使用類來管理顯示/隱藏和事件偵聽器來偵聽對選擇菜單的更改
window.addEventListener('load', () => { document.querySelector('.food').addEventListener('change', e => { // first hide all food-item selectors document.querySelectorAll(`.food-item`).forEach(el => el.classList.add('hide')); // now reveal the one we want to show based on the e.target.value document.querySelector(`.${e.target.value}`).classList.remove('hide') }) })
.hide { display: none; } .food-item { margin-top: 20px; }
Pick a food: <select class="food"> <option value="pizza"> Pizza </option> <option value="hamburger"> Hamburger </option> </select> <div class="pizza hide food-item"> Select 2 toppings: <select name="topp1"> <option value="pepperoni"> Pepperoni </option> <option value="mushroom"> Mushroom </option> <option value="bell"> Bell Pepper </option> </select> <select name="topp2"> <option value="mushroom"> Mushroom </option> <option value="pepperoni"> Pepperoni </option> <option value="bell"> Bell Pepper </option> </select> </div> <div class="hamburger hide food-item"> Select 2 fillings: <select name="fill1"> <option value="lettuce"> Lettuce </option> <option value="tomato"> Tomato </option> <option value="bacon"> Bacon </option> </select> <select name="fill2"> <option value="tomato"> Tomato </option> <option value="lettuce"> Lettuce </option> <option value="bacon"> Bacon </option> </select> </div>
如何在不使用innerHTML的情況下使用純JavaScript添加大量HTML
[英]How to add large amount of HTML using pure javascript without innerHTML
如何在不使用.innerHTML的情況下使用DOM設置HTML表中的值？
[英]How to use the DOM to set values in HTML table without using .innerHTML?
在使用onClick和innerHTML時，如何正確地逃避大塊HTML？
[英]How can I properly escape a large block of HTML when using onClick and innerHTML?
如何在不更改文本的情況下使用 JavaScript（我正在使用 innerHTML）更改 header 的顏色？
[英]How do I change the color of the header with JavaScript (I am using innerHTML) without changing the text as well?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.