我可以't获取多个相同的id来执行同一个脚本

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

本文关键字：id 执行 脚本 同一个 获取 我可以      更新时间：2023-09-26

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

这是我在JS中的代码。问题是，即使我有三个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);
}

新代码。这应该行得通。

getElementsByClassName将只返回具有类名的所有元素的array-like object。你必须循环它并一个接一个地分配它。

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

如果必须多次使用class，请使用class而不是id。Id只能使用一次，而class可以使用任意次数。getElementById（）应该仍然适用于类。

不要创建包含具有重复ID的元素的标记这会打碎东西，你会被一只速度比你说"goto"更快的迅猛龙咬伤。

改为使用类：

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

请为其使用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);
}
相关文章：