javascript - 如何编写此javascript代码清洁程序？

所有

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

我有四个具有不同外观的页脚，最初将它们设置为“ 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';

}

最佳答案

您可以像这样使用数组：

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

比较短。