我无法获得多个相同的 ID 来执行相同的脚本

Question

我想创建滚动到顶部的按钮。

这是我在 JS 中的代码。问题是，即使我有 3 个具有相同 ID 的按钮，但每次加载页面时我只能使用一个。为什么会这样？我应该怎么办？

更新

我不知道我的ID只能用一次。我尝试了所有建议的解决方案，但出于某种原因 getElementsByClassName 也不起作用。 :(

解决方案是替换为：

$('.scrolltotop').on('click', function(){/* do your stuff */});

这也是我的 html：

<ul class="stats">
<li class="scrolltotop"><a href="#">GO TO TOP</a></li>
</ul>

JS:

document.getElementsByClassName('scrolltotop').onclick = function () {
 scrollTo(document.body, 0, 100);
}

    function scrollTo(element, to, duration) {
        if (duration < 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}

Answer 1

如果必须多次使用它，请使用 class 而不是 id。 Id 只能使用一次，而 class 可以使用任意次。 getElementById() 应该仍然适用于 classes.

Answer 2

请使用 class 因为每个元素的 id 都是唯一的

 var classname = document.getElementsByClassName("scrolltotop");


for (var i = 0; i < classname.length; i++) {
    classname[i].onclick = function () {
     scrollTo(document.body, 0, 100);
    }
 }

function scrollTo(element, to, duration) {
    if (duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

   setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    scrollTo(element, to, duration - 2);
   }, 10);
}

Answer 3

不要创建包含具有重复 ID 的元素的标记。这会破坏事情，您将 mauled by a velociraptor faster than you can say "goto"。

改用类：

<img src='...' class='scrolltotop' />
<img src='...' class='scrolltotop' />
document.getElementsWithClass('scrolltotop').onclick = function () {
   scrollTo(document.body, 0, 100);
}

Answer 4

新代码。这应该工作。

getElementsByClassName 只会 return 您 array-like object 所有具有 class 名称的元素。你必须循环它并一个一个地分配它。

var classData = (document.getElementsByClassName('scrolltotop'));
for(var i = 0; i < classData.length; i++)
{
    classData[i].onclick = function()
    {
        scrollTo(document.body, 0, 100);
    }
}
function scrollTo(element, to, duration)
{
    if(duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout(function()
    {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}

另一种轻松实现的方法是使用 jQuery。

$('.scrolltotop').on('click', function(){/* do your stuff */});

我无法获得多个相同的 ID 来执行相同的脚本

I can't get multiple same ids to execute the same script

html

javascript

scroll

getelementbyid