javascript - getElement 1和do1，getElement 2和do2，getElement 3和do3

我有这段代码可以顺利滚动，但效果很好，但仅适用于一个“ clickme” ID，我如何将这段代码用于多个选项卡？

<div class="navbar">
  <button type="button" id="clickme1">Scroll to red section!</button>
  <button type="button" id="clickme2">Scroll to blue section!</button>
</div>

<div class="second" id="second">Hello</div>
<div class="tab1" id="tab1">The start of the red section!</div>
<div class="tab2" id="tab2">The start of the blue section!</div>

这是我要使用的纯JavaScript，请不要向我推荐jQuery和锚导航。

document.getElementById('clickme1').addEventListener('click', function() {

    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();

    smoothScroll(document.getElementById('tab1'));
});

*******或更简化，我该如何简化此代码：*******

document.getElementById('clickme1').addEventListener('click', function() {
    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();

    smoothScroll(document.getElementById('tab1'));
});

document.getElementById('clickme2').addEventListener('click', function() {
    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();

    smoothScroll(document.getElementById('tab2'));
});

这是JSFIDDLE

最佳答案

您可以执行以下操作

// Get buttons
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
    // Iterate over buttons and add handler
    buttons[i].addEventListener('click', clickHandler, false);
}

// Handler function
function clickHandler(){
    var counter = this.id.substring(7); // Substring id to get counter
    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();
   smoothScroll(document.getElementById('tab'+counter));
}

注意：由于您可以在页面上有一些其他按钮，并且不想向其添加此处理程序，因此，我建议您代替按钮名称选择器，向按钮元素添加特定的类，然后再使用类选择器获得元素。

关于javascript - getElement 1和do1，getElement 2和do2，getElement 3和do3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34593510/