Question

这是我写的一些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";
    }
}

Answer 1

使用以元素作为参数调用的单个函数

＆＃13;

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)});

＆＃13;

#directorOne {background:#333; padding: 20px;}
#directorTwo {background:#ddd; padding: 20px;}

＆＃13;

<div id="directorOne">d1<textarea id="directorOneText"></textarea></div>
<div id="directorTwo">d2<textarea id="directorTwoText"></textarea></div>

＆＃13;

Javascript：如何减少或改进此代码？

1 个答案: