简体   繁体   English

Javascript:如何减少或改进此代码?

[英]Javascript: How can this code be reduced or improved?

This is some JS that I've written, how can this be reduced?这是我写的一些JS,如何减少? it swaps the text as in hides one div and displays the other.它交换文本,因为隐藏一个 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";
    }
}

Using a single function that is called with the elements as parameters使用以元素为参数调用的单个函数

 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM