javascript - 我怎样才能写出更干净的 JavaScript 代码？

Question

全部

我目前正在练习我的编码技能，并正在制作一个简单的页脚选择网页。

我有四个外观不同的页脚，最初设置为“display:none”。然后，我有四个按钮，每个按钮都对应其页脚类型。单击该按钮时，会显示页脚。

现在我只想知道如何编写比我目前拥有的更干净的 Javascript。一如既往地感谢您。

var footer1 = document.getElementById('footer1');
var footer2 = document.getElementById('footer2');
var footer3 = document.getElementById('footer3');
var footer4 = document.getElementById('footer4');

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');


btn1.onclick = function(e) {
    console.log('You clicked button1');
    e.preventDefault();

    footer1.style.display = 'block';
    footer2.style.display = 'none';
    footer3.style.display = 'none';
    footer4.style.display = 'none';


}

btn2.onclick = function(e) {
    console.log('You clicked button2');
    e.preventDefault();
    footer2.style.display = 'block';
    footer1.style.display = 'none';
    footer3.style.display = 'none';
    footer4.style.display = 'none';



}

btn3.onclick = function(e) {
    console.log('You clicked button3');
    e.preventDefault();
    footer3.style.display = 'block';
    footer2.style.display = 'none';
    footer1.style.display = 'none';
    footer4.style.display = 'none';

}

btn4.onclick = function(e) {
    console.log('You clicked button4');
    e.preventDefault();
    footer4.style.display = 'block';
    footer2.style.display = 'none';
    footer3.style.display = 'none';
    footer1.style.display = 'none';

}

Answer 1

你可以像这样使用数组:

let buttons = [ 'btn1', 'btn2', 'btn3', 'btn4' ];
let footers = [ 'footer1', 'footer2', 'footer3', 'footer4' ];

buttons.forEach((btn, index) => {
    // Please note that you might want to use addEventListener instead of onclick

    document.getElementById(btn).addEventListener('click', (event) => {
        event.preventDefault();

        let button = 'button' + (index + 1);

        alert('You clicked ' + button);

        footers.forEach((footer, index_f) => {
            let f = document.getElementById(footer);

            if(index_f === index) {
                f.style.display = 'block';
            }
            else {
                f.style.display = 'none';
            }
        });
    });
});

为了让事情变得更有趣，您可以使用 querySelectorAll 和自定义属性。例如，您可以将 custom-button 类添加到按钮，将 custom-footer 添加到页脚，并在每个按钮上添加一个 data-footer 属性指向相应页脚的 id。然后，你可以这样做:

document.querySelectorAll(".custom-button").forEach((button) => {
    button.addEventListener('click', (event) => {
        document.querySelectorAll(".custom-footer").forEach(footer => footer.style.display = 'none');

        let footer = button.getAttribute("data-footer");

        document.getElementById(footer).style.display = 'block';
    });
});

相当短。