Javascript jQuery到纯JS的转换不起作用

最近，我一直在尝试使用纯JavaScript而不是jQuery。随着我对纯JS的了解越来越多，我不认为这有那么难，也不认为实际的代码有那么大的差异，当然，它的速度要快一点

直到今天，我才将一个70行的脚本从jQuery转换为JavaScript，尽管我已经在jslint.com上检查了我的新代码是否有错误，但它不会工作。在发布代码和区别之前，我基本上做的是将

.on（“change”

转换为

.addEventListener（“change”

），同时替换其他jQuery函数和选择器

工作jQuery代码的一部分：

jQuery("form.abo input").change(function() {
if(jQuery("#likerdudanse input[value='ja']").is(":checked") || jQuery("form input[value='Tilknyttet en danseklubb']").is(":checked")) {
    jQuery("#jeglikerdanse").removeAttr("style");
    if(jQuery("form input[value='Tilknyttet en danseklubb']").is(":checked")) {
        jQuery("#likerdudanse").hide();
    }
    else {
        jQuery("#likerdudanse").removeAttr("style");
    }
}
else {
    jQuery("#jeglikerdanse").hide();
    jQuery("#likerdudanse").removeAttr("style");
}
if(jQuery("form fieldset:first-child input[value='bestille et abonnement']").is(":checked")) {
    jQuery("#hardukode").removeAttr("style");
    jQuery("#tskjorte").removeAttr("style");
    if(jQuery("#hardukode input[value='ja']").is(":checked")) {
        jQuery("#hardukode label:last-of-type, #hardukode br, #hardukode > input:last-of-type").removeAttr("style");
        jQuery("#tskjorte").hide();
    }
    else {
        jQuery("#hardukode label:last-of-type, #hardukode br, #hardukode > input:last-of-type").hide();
        jQuery("#tskjorte").removeAttr("style");
    }
    if(jQuery("#tskjorte input[value='ja']").is(":checked")) {
        jQuery("#tskjorte #i, #tskjorte #j, #tskjorte label[for='i'], #tskjorte label[for='j'], #tskjorte br").removeAttr("style");
    }
    else {
        jQuery("#tskjorte #i, #tskjorte #j, #tskjorte label[for='i'], #tskjorte label[for='j'], #tskjorte br").hide();
    }
}
else {
    jQuery("#hardukode").hide();
    jQuery("#tskjorte").hide();
}
}).change();

我的新代码太难了，纯JavaScript代码根本不起作用

document.querySelector("form#abo input").addEventListener("change", function(){
if(document.querySelector("form fieldset:first-child input[value='bestille et abonnement']:checked")) {
    document.getElementById("hardukode").removeAttribute("style");
    document.getElementById("tskjorte").removeAttribute("style");
    if(document.querySelector("#hardukode input[value='ja']:checked")) {
        document.querySelectorAll("#hardukode label:last-of-type, #hardukode br, #hardukode > input:last-of-type").removeAttribute("style");
        document.getElementById("tskjorte").style.display = "none";
    }
    else {
        document.querySelectorAll("#hardukode label:last-of-type, #hardukode br, #hardukode > input:last-of-type").style.display = "none";
        document.getElementById("tskjorte").removeAttribute("style");
    }
    if(document.querySelector("#tskjorte input[value='ja']:checked")) {
        document.querySelectorAll("#tskjorte #i, #tskjorte #j, #tskjorte label[for='i'], #tskjorte label[for='j'], #tskjorte br").removeAttribute("style");
    }
    else {
        document.querySelectorAll("#tskjorte #i, #tskjorte #j, #tskjorte label[for='i'], #tskjorte label[for='j'], #tskjorte br").style.display = "none";
    }
}
else {
    document.getElementById("tskjorte").style.display = "none";
    document.getElementById("hardukode").style.display = "none";
}
if(document.querySelector("#likerdudanse input[value='ja']:checked") || document.querySelector("form input[value='Tilknyttet en danseklubb']:checked")) { 
    document.getElementById("jeglikerdanse").removeAttribute("style");
    if(document.querySelector("form input[value='Tilknyttet en danseklubb']:checked")) {
        document.getElementById("likerdudanse").style.display = "none";
    }
    else {
        document.getElementById("likerdudanse").removeAttribute("style");
    }
}
else {
    document.getElementById("jeglikerdanse").style.display = "none";
    document.getElementById("likerdudanse").removeAttribute("style");
}
});

有人擅长这个，请帮忙，那太好了

//

queryselectoral（）

返回一个数组（实际上是一个

NodeList

），该数组没有

style

（或任何其他）属性

调用

querySelector（）

或循环数组

---

PS：这就是为什么人们使用jQuery。

< P>我想我大部分都已经得到了，也许我错过了一些部分，因为你的代码很长。你应该考虑使用和更好的可读性。

首先，SLaks返回a是正确的。要遍历其项，需要使用for循环，这里我将这些部分更改为：

 var el = document.querySelectorAll("selectors");
 for (i = 0; i < el.length; i++) {
     el[i].style.display = "none";
     }
 document.getElementById("id").removeAttribute("style");

var el=document.queryselectoral（“选择器”）；
对于（i=0；i

然后我将第一个选择器更改为只检查

id

，因为id必须是唯一的：

document.getElementById（'abo'）.addEventListener（“更改”，函数（）{

最后，我改变了每一个

if（document.querySelector（#id input[value='ja']：checked））

到

if（document.querySelector（“#id input[value='ja']”。选中）

作为一个布尔属性，它可以在

if

语句中使用

您可以在中看到整个更改的代码

---

PS：您是使用jQuery学习web编码的受害者，这使您无法理解真正发生的事情。请继续学习纯JavaScript。

您会遇到什么错误？是的，对html代码的处理是错误的wanted@SLaks我很少遇到控制台错误，如果你明白的话，新代码对HTML没有任何影响。为什么要投否决票？我我认为我写的问题很容易理解和具体。当然，如果有帮助的话，我可以做一把小提琴。然后使用调试器查看它在做什么或不在做什么。我现在看到我的选择器与

querySelectorAll（）

使用

.style

选择器之后就不起作用了，谢谢。还有其他问题，但谢谢你解决了。我会调查更多。我是纯JS的新手，不需要那些否决我5次的人，那太残忍了。@mangseth：不是你是新手，而是你没有努力解决这个问题你自己的。相信我，我花了好几个小时试图弄明白。我认为这是不公平的，因为我已经阅读了文档等。我错过了一个选择器没有按我认为的方式工作的事实，这是人为错误。我只是不理解关于未定义样式元素的控制台错误。@mangseth:不；你为什么不尝试调试呃？那些行会抛出JS错误。非常感谢您的帮助。我只有3个问题：1：我知道ID必须是唯一的，但是为什么不

document.querySelector（#abo input“）.addEventListener

函数？这在CSS中是允许的。2：如何在侦听器之后触发更改事件？我尝试了

dispatchEvent

，但它没有按我预期的方式工作，我想我可以像jQuery:

document.querySelector（）.addEventListener（{}.dispatchEvent（“更改”）那样将它链接到最后

.3:在这个例子中，你是怎么做的

document.queryselectoral（）.addEventListener

？是的，我是jQuery的受害者，感谢你的支持。1.实际上document.querySelector（“abo输入”）可以工作，但返回第一个单选元素（在js控制台中尝试console.log（document.querySelector（“abo输入”）。您没有更改输入的value属性，而是更改选中的属性，这意味着它不会触发onchange事件。因此，您必须将函数附加到包含此单选输入的窗体（）2.检查并将其包含在函数中。3.你是什么意思？你在哪里找到的？感谢你更新的小提琴！我自己无法制作这样的东西。关于3，这是我代码的一部分，我没有发布。看这里：你也需要这样做：

querySelectorAll（）

返回一个没有事件处理程序的节点列表。因此，您需要在这些节点之间循环以将事件附加到每个节点。