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

Question

我有这段用于平滑滚动的代码，它工作得很好，但只适用于一个“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和 anchor 导航。

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

Answer 1

你可以做如下的事情

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

注意 :由于您的页面上可能有一些其他按钮并且不想向它们添加此处理程序，因此，我建议您添加一个特定的标签名称选择器来代替类到按钮元素，然后使用类选择器获取元素。