[英]Multiple JavaScript Buttons Simplified Into One Function
我有三個按鈕和三個JS功能,可以切換三個不同div的顯示。 如何將我的三個JS函數簡化/壓縮成一個將每個按鈕連接到相應內容的函數?
例:
HTML按鈕
<button onclick="myFunction1()">Button 1</button>
<button onclick="myFunction2()">Button 2</button>
<button onclick="myFunction3()">Button 3</button>
HTML內容
<div id="ContentOne">This is Content One.</div>
<div id="ContentTwo">This is Content Two.</div>
<div id="ContentThree">This is Content Three.</div>
JavaScript的
function myFunction1() {
var x = document.getElementById("ContentOne");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("ContentTwo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction3() {
var x = document.getElementById("ContentThree");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
將參數添加到精簡函數etviolà!
function myFunction(id) { var x = document.getElementById(id); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }
<button onclick="myFunction('ContentOne')">Button 1</button> <button onclick="myFunction('ContentTwo')">Button 2</button> <button onclick="myFunction('ContentThree')">Button 3</button> <div id="ContentOne">This is Content One.</div> <div id="ContentTwo">This is Content Two.</div> <div id="ContentThree">This is Content Three.</div>
功能中唯一不同的部分是ID,因此將ID解耦。 該功能不需要知道哪個元素會受到樣式調整的影響。 所以保持功能“轉儲”。
如果你有興趣改進你的編程風格,我建議你看看一些反模式 。 例如,您演示了硬編碼的反模式。 它並不像你想象的那樣不典型。
內聯JS很難維護。
我只使用一行CSS來隱藏元素,
並使用JS簡單地切換.hide
類 :
const toggleEl = e => document.getElementById(e.target.dataset.tog).classList.toggle("hide"); [...document.querySelectorAll("[data-tog]")].forEach( btn => btn.addEventListener("click", toggleEl) );
.hide { display: none;}
<button data-tog="ContentOne">Button 1</button> <button data-tog="ContentTwo">Button 2</button> <button data-tog="ContentThree">Button 3</button> <div class="hide" id="ContentOne">This is Content One.</div> <div class="hide" id="ContentTwo">This is Content Two.</div> <div class="hide" id="ContentThree">This is Content Three.</div>
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
如果您願意,這是一個ES5示例:
function toggleEl() { var id = this.getAttribute("data-tog"); document.getElementById(id).classList.toggle("hide"); } var buttons = document.querySelectorAll("[data-tog]"); [].forEach.call(buttons, function( btn ) { btn.addEventListener("click", toggleEl.bind(btn)) });
.hide { display: none;}
<button data-tog="ContentOne">Button 1</button> <button data-tog="ContentTwo">Button 2</button> <button data-tog="ContentThree">Button 3</button> <div class="hide" id="ContentOne">This is Content One.</div> <div class="hide" id="ContentTwo">This is Content Two.</div> <div class="hide" id="ContentThree">This is Content Three.</div>
您可以使用更高階的功能。
function generateFunction(elementId) {
return function() {
var x = document.getElementById(elementId);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
var myFunction1 = generateFunction("ContentOne");
var myFunction2 = generateFunction("ContentTwo");
var myFunction3 = generateFunction("ContentThree");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.