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添加到页脚中，然后在每个按钮上添加指向相应页脚ID的data-footer属性。然后，您可以这样做：

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

短得多。

Answer 2

有一种通用的方法。

要分组显示/隐藏类似单选按钮的功能的所有元素之间共享一个类（foo）。

然后使用一个功能，例如

function handler = function(e) {
  var foos = document.getElementsByClass("foo");
  // make all foos display="none"
  var target = targets[e.target]; //get the footer to show from the target button
  target.style.display = "block";
}

Answer 3

您可以使用属性选择器遍历元素。

[attributeName =“ value”]

^：均值始于

$：以
结尾

这样，您的逻辑是通用的，不需要您维护任何ID列表

想法：

您可以创建一个模式，其中每个按钮ID都对应于必要页脚的可见性。更好的主意是使用数据属性（data-<attr name>），但您现在可以使用id s。
遍历所有按钮，并使用addEventListener添加处理程序。 onClick是一个属性，因此分配将擦除/覆盖先前的值。如果按钮太多，则可以使用内联匿名函数或命名函数。
在此处理程序中，循环遍历所有页脚并将其隐藏。
使用this.id获取索引并显示必要的页脚。使用类进行此类操作而不是设置样式总是更好。

var buttons = document.querySelectorAll('[id^="btn"]');

Array.from(buttons, (button) => {
  button.addEventListener('click', function(event) {
    const footers = document.querySelectorAll('[id^="footer"]');
    Array.from(footers, (footer) => footer.style.display = 'none' );
    const index = this.id.match(/\d+/)[0];
    document.getElementById(`footer${index}`).style.display = 'block';
  })
})

div[id^="footer"] {
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  margin: 10px;
}

<div id="footer1"> Footer 1 </div>
<div id="footer2"> Footer 2 </div>
<div id="footer3"> Footer 3 </div>
<div id="footer4"> Footer 4 </div>

<button id="btn1"> Button 1 </button>
<button id="btn2"> Button 2 </button>
<button id="btn3"> Button 3 </button>
<button id="btn4"> Button 4 </button>

参考文献：

Attribute Selector - MDN

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

3 个答案:

想法：

参考文献：