[英]Javascript: How can this code be reduced or improved?
這是我寫的一些JS,如何減少? 它交換文本,因為隱藏一個 div 並顯示另一個。
var directorOne = document.getElementById('directorOne').addEventListener("click", changeText);
var directorOneText = document.getElementById('directorOneText');
function changeText() {
if (directorOneText.style.display === "block") {
directorOneText.style.display = "none";
directorTwoText.style.display = "none";
console.log("luke open");
} else {
directorOneText.style.display = "block";
directorTwoText.style.display = "none";
}
}
var directorTwo = document.getElementById('directorTwo').addEventListener("click", changeText2);
var directorTwoText = document.getElementById('directorTwoText');
function changeText2() {
if (directorTwoText.style.display === "block") {
directorTwoText.style.display = "none";
directorOneText.style.display = "none";
console.log("bruce open");
} else {
directorTwoText.style.display = "block";
directorOneText.style.display = "none";
}
}
使用以元素為參數調用的單個函數
var directorOneText = document.getElementById('directorOneText'); var directorTwoText = document.getElementById('directorTwoText'); function changeText(t1, t2) { t1.style.display = (t1.style.display === "block") ? "none" : "block"; t2.style.display = "none"; } var directorOneClickEvent = document.getElementById('directorOne').addEventListener("click", function(){ changeText(directorOneText, directorTwoText)}); var directorTwoClickEvent = document.getElementById('directorTwo').addEventListener("click", function(){ changeText(directorTwoText, directorOneText)});
#directorOne {background:#333; padding: 20px;} #directorTwo {background:#ddd; padding: 20px;}
<div id="directorOne">d1<textarea id="directorOneText"></textarea></div> <div id="directorTwo">d2<textarea id="directorTwoText"></textarea></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.