Question

最近，我一直在尝试使用纯JavaScript而不是jQuery。随着我越来越多地阅读关于纯JS的内容，我并不认为它很难，或者实际代码中存在很大差异，当然它的速度要快一些。< / p>

直到今天，当我将整个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");
}
});

熟练掌握这一点的人，请帮忙，那会很棒。

jQuery fiddle (desired behaviour) // non-effecting JavaScript fiddle

Answer 1

我想我已经得到了它，也许我错过了一些部分，因为你的代码很长。您应该考虑使用ids和classes来提高所有这些内容的可读性。

首先，SLaks对于querySelectorAll()返回nodeList是正确的。要遍历其项目，您需要使用for循环，在这里我将这些部分更改为：

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

然后我更改了第一个选择器以检查id，因为ids 必须是唯一的： document.getElementById('abo').addEventListener("change", function () {

最后我改变了每一个 if(document.querySelector("#id input[value='ja']:checked"))
到
if (document.querySelector("#id input[value='ja']").checked)
因为checked是一个布尔属性，它可以在if语句中使用。

您可以在updated fiddle中看到整个更改后的代码。

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

Answer 2

querySelectorAll()返回一个数组（实际上是NodeList），它没有style（或任何其他）属性。

调用querySelector()或循环遍历数组。

PS：这就是人们使用jQuery的原因。

jQuery到纯JS转换不起作用

2 个答案: