时间戳

首页 > 解决方案 > 如何编写此 javascript 代码清洁器？

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

}

标签： javascript

解决方案

你可以像这样使用数组：

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

相当短。

推荐阅读