我正在創建一個儀表板，其中包含大約 20 個以“display: none;”開頭的 div。
當使用側邊欄中的 .onClick() 時，它將顯示特定的 div 并隱藏所有其他 div。我使用了為每個 div 創建一個函式的經典解決方案，但是非常冗長，代碼看起來很亂。
有沒有更好更簡潔的方法來使用 Javascript 實作這一目標？
這是我的代碼：
function presale() {
var x = document.getElementById("presale");
var y = document.getElementById("claim");
var z = document.getElementById("stake");
if (x.style.display === "grid") {
x.style.display = "none";
} else {
x.style.display = "grid";
y.style.display = "none";
z.style.display = "none";
}
}
function claim() {
var x = document.getElementById("presale");
var y = document.getElementById("claim");
var z = document.getElementById("stake");
if (y.style.display === "grid") {
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "grid";
z.style.display = "none";
}
}
function stake() {
var x = document.getElementById("presale");
var y = document.getElementById("claim");
var z = document.getElementById("stake");
if (z.style.display === "grid") {
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.display = "grid";
}
}*,
html {
color: #fff;
background-color: black;
}
#presale,
#claim,
#stake
/* Here I have many other divs like below */
{
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" href="MOD.CSS">
<script src="main2.js"></script>
<title>Base Template</title>
</head>
<body>
<div>
<ul>
<!-- Here I have other 20 options like the above -->
<li onclick="presale()">Presale</li>
<li onclick="claim()">Claim</li>
<li onclick="stake()">Stake</li>
<!-- Here I have other 20 options like the above -->
</ul>
<div id="presale">
<h1>Presale</h1>
</div>
<div id="claim">
<h1>Claim</h1>
</div>
<div id="stake">
<h1>Stake</h1>
</div>
</div>
</body>
</html>有沒有更好的方法來做到這一點，而無需創建一個函式并為每個 div 一遍又一遍地重復相同的事情？
uj5u.com熱心網友回復：
這是代碼審查部分的問題https://codereview.stackexchange.com/
但是，請像這樣嘗試：
const elems = ["presale", "claim", "stake"];
function toggle(elem) {
elems.map(i => {
let el = document.getElementById(i);
if (el.style.display === "grid") {
el.style.display = "none";
} else {
el.style.display = "grid";
}
})
}
并在 html 中添加 elem 名稱作為引數，因此，替換它
<li onclick="presale()">Presale</li>
<li onclick="claim()">Claim</li>
<li onclick="stake()">Stake</li>
有了這個
<li onclick="toggle('presale')">Presale</li>
<li onclick="toggle('claim')">Claim</li>
<li onclick="toggle('stake')">Stake</li>
uj5u.com熱心網友回復：
您可以簡單地為每個 showable分配相同的類（例如 ） ，然后將 傳遞給您的函式（這將顯示并隱藏所有其他類）。my_divdivid
function show_hide(id) {
document.querySelectorAll('.my_div').forEach(my_div => {
my_div.style.display = my_div.getAttribute('id') == id ? 'block' : 'none';
});
}.my_div {
display: none;
}<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div>
<ul>
<li onclick="show_hide('presale')">Presale</li>
<li onclick="show_hide('claim')">Claim</li>
<li onclick="show_hide('stake')">Stake</li>
</ul>
<div class="my_div" id="presale">
<h1>Presale</h1>
</div>
<div class="my_div" id="claim">
<h1>Claim</h1>
</div>
<div class="my_div" id="stake">
<h1>Stake</h1>
</div>
</div>uj5u.com熱心網友回復：
像這樣使用資料屬性和類串列切換的東西也應該起作用。
我會考慮通過使用通用 CSS 選擇器來隱藏/顯示各個部分來最小化您的代碼（和 CSS）。這也使下一個人更容易實作可擴展性和可維護性。
這有一個額外的好處，即您的樣式可以 100% 使用 CSS 進行控制，而不是由 javascript 設定的任意行內樣式。
const buttons = Array.from(document.querySelectorAll("[data-toggle-section]"));
const sections = buttons.map(element => {
return document.getElementById(element.attributes['data-toggle-section'].value)
});
buttons.forEach(element => {
element.addEventListener('click', event => {
const selected = element.attributes['data-toggle-section'].value;
sections.forEach(section => {
if(section.id === selected) {
section.classList.toggle('shown')
} else {
section.classList.remove('shown');
}
})
});
});*,
html {
color: #fff;
background-color: black;
}
.option-section {
display: none;
}
.option-section.shown {
display: grid;
}<div>
<ul>
<!-- Here I have other 20 options like the above -->
<li data-toggle-section="presale">Presale</li>
<li data-toggle-section="claim">Claim</li>
<li data-toggle-section="stake">Stake</li>
<!-- Here I have other 20 options like the above -->
</ul>
<div id="presale" class="option-section">
<h1>Presale</h1>
</div>
<div id="claim" class="option-section">
<h1>Claim</h1>
</div>
<div id="stake" class="option-section">
<h1>Stake</h1>
</div>
</div>uj5u.com熱心網友回復：
在這里，您會看到一個普通的 Javascript 解決方案。
contentdiv 默認是隱藏的。
如果單擊一個元素，則對應data-id的獲取類show。
window.onload = function () {
document.querySelectorAll('#nav li').forEach((elements) => {
elements.addEventListener('click', (el) => {
document.querySelectorAll('.content').forEach((item) => {
// hide all
item.classList.remove('show');
});
// show one
document.getElementById(el.target.getAttribute('data-id')).classList.add('show');
});
});
};.content {
display: none;
}
.show {
display: block;
}<ul id="nav">
<li data-id="presale">Presale</li>
<li data-id="claim">Claim</li>
<li data-id="stake">Stake</li>
</ul>
<div id="presale" class="content">
<h1>Presale</h1>
</div>
<div id="claim" class="content">
<h1>Claim</h1>
</div>
<div id="stake" class="content">
<h1>Stake</h1>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/490596.html
標籤：javascript html jQuery css