将jQuery转换为纯JavaScript

我在尝试将这段代码从

jQuery

转换为纯

JavaScript

时遇到问题

我把一切都写在一个例子里

剧本是

$(".button").click(function () {
    $pageID = $(this).attr('name');
    var htmlString = $('#' + $pageID).html();
    $('#1').html(htmlString);
});

$(".button").click(function () {
    $(".button").css('background-position', '0px 0px');
    $(this).delay(50).css('background-position', '0px -40px');
});

$(document).ready(function () {
    $("[name='page1']").trigger('click');
});

我用过的第一个街区

function changeNavigation(id){
    document.getElementById('1').innerHTML=document.getElementById(id).innerHTML;
} 

并在每个

中添加了

onclick=“changeNavigation（id）；”

将

id

替换为

page1

page2

等，以用于各自的按钮。 这似乎很管用。问题是第二段代码

我试着用

document.getElementById("button").style.background-position="0px -40px";

将

class

更改为

id

属性，只是为了测试它，但它不起作用。 有什么问题吗？是纯JS不支持背景位置吗

另外，作为最后一件事，是否可以使用

.innerHTML

编写JS代码？ 我曾尝试使用JS和jQuery来编写脚本，尽管两者都编写了相同的内容，但编写的代码不能与

一起使用

style.backgroundPosition

而不是

style.background-position

多亏了安东尼·格里斯特

您使用了类而不是ID。因此它类似于

document.getElementsByClassName("button")[0].style.backgroundPosition="0px -40px"

连字符在JavaScript的属性名称中无效。因此，CSS属性
backgroundPosition
在JavaScript中被称为
backgroundPosition
。
您的jQuery代码使用类选择器（
.button
），因此
getElementById（）
肯定不是正确的函数。为什么在同一个类上绑定了两次不同的单击？我的意思是，您也可以在单个事件绑定中执行相同的任务@马库斯，你说得对！谢谢你。@Anthony Grist是的，我知道。这就是我试图将类更改为ids instea的原因。@Marian嗯，ids需要是唯一的，所以尝试使用多个
元素是行不通的。还有一个问题，那么您必须迭代返回的集合，并分别修改每个集合的样式。@Marian这不起作用。不是因为他们告诉了你一些不正确的事情（他们没有），而是因为你之前试着选择的东西不正确。似乎选择失败了。控制台给出了这个错误
Uncaught ReferenceError:s未定义
Yeah，也找到了解决方案。非常感谢！最后一件事，如您所见，我只想将样式更改为单击的按钮，其余的恢复为“默认”样式，位置为
0px 0px
，因此是否可以选择所有div并应用
0px 0px
，然后应用于单击的按钮
0px-40px
？