我有來自多個地點的潮汐表，每個潮汐表都位于一個 div 內。位置是從下拉菜單中選擇的。頁面打開時默認顯示第一個位置潮汐表。當我更改位置時，它會選擇相應的 div 并僅顯示該 div 內的潮汐表，而忽略其他 div。它工作正常（感謝@charlietfl），但是使用 Jquery 導致我主頁的其他部分出現問題，所以我正在尋找不同的解決方案來實現相同的結果。這就是我現在所擁有的： <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('select#location').change(function() { $('.box').hide().filter('.' + this.value).show(); // set the value and trigger change on page load }).val('A').change() </script> <div> <select id="location"> <option value="A">Location A</option> <option value="B">Location B</option> <option value="C">Location C</option> </select> </div> <div class="box A">Tide Location A</div> <div class="box B">Tide Location B</div> <div class="box C">Tide Location C</div>有沒有辦法使用純 JS（無庫）獲得相同的結果？提前致謝。
2 回答
三國紛爭
TA貢獻1804條經驗 獲得超7個贊
請嘗試以下示例
document.querySelector("select#location").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
} else {
box.classList.add("hide");
}
}
}
display("A");
.hide {
display: none;
}
<div>
<select id="location">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">Tide Location A</div>
<div class="box B">Tide Location B</div>
<div class="box C">Tide Location C</div>
慕桂英3389331
TA貢獻2036條經驗 獲得超8個贊
對 div使用 CSS顯示屬性
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
- 2 回答
- 0 關注
- 201 瀏覽
添加回答
舉報
0/150
提交
取消