javascript - 将 jquery 函数转换为 javascript

Question

我正在努力提升我的 Javascript 知识并提高我目前作为设计师兼开发人员的工作水平。我和另一个开发人员合作开发这个 jQuery 来改变 Squarespace 的默认菜单行为，这真的很奇怪。但我们加载整个 jQuery 库只是为了完成这一件事。

我想重写代码以在普通的 JavaScript 中运行，这样我就不必在我们制作的每个网站上加载该库，但我在 Javascript 方面没有足够的经验，无法轻松完成此操作。

这是代码:

$(function () {
    if ($(window).width() > 640) {
        $(function () {
            $(".folder-parent a").each(function () {
                $(this).next().find("a").first().hide();
            });
            $(".folder-parent a").click(function () {
                window.location = $(this).next().find("a").first().attr("href");
            });
        });
    }
});

我发现一些潜在的问题。首先，我知道类选择器必须重写，或者有其他方法吗？我无法选择添加 ID，因此我可以使用 getElementsById。Javascript 可以跳过 DOM(下一步、查找)等等吗？

我将尝试重写这段代码，但我想知道你们是否有任何转换代码的指示，或者需要避免的任何陷阱，或者类似的事情。非常感谢!

安德鲁

编辑:这是我在普通 Javascript 中的尝试。这实际上是我编写的第一个不是来自教程的函数，所以它不起作用。我究竟做错了什么？我想我混合了一些 jQuery。

// Function to change the default menu behavior of Squarespace. Written minus jQuery!
function fixSquarespaceNav {
    if (document.documentElement.offsetWidth > 640) { 
        var navElement = document.querySelectorAll(".folder-parent a");
        foreach (navElement) { 
            this.next().find("a").first().style.display = "none";
        }
        navElement.onclick=function(){
            window.location = this.next().find("a").first().attr("href");
        }; /* navElement */
    }
}

Answer 1

或多或少的直译是

function fixSquarespaceNav() {
    if (document.documentElement.offsetWidth > 640) { 
        var navElements = document.querySelectorAll(".folder-parent a");
        for(var i=0, l=navElements.length; i<l; ++i)
            navElements[i]
                .nextElementSibling
                .getElementsByTagName('a')[0]
                .style.display = "none";
        for(var i=0, l=navElements.length; i<l; ++i)
            navElements[i].onclick = function(){
                window.location =
                    this
                    .nextElementSibling
                    .getElementsByTagName('a')[0]
                    .getAttribute('href');
            };
    }
}

但是你可以使用

(function() {
    function getAnchor(el) {
        return el.nextElementSibling.getElementsByTagName('a')[0];
    }
    function handler() { window.location = getAnchor(this).href; }
    return function fixSquarespaceNav() {
        var navElements = document.querySelectorAll(".folder-parent a");
        for(var i=0, l=navElements.length; i<l; ++i) {
            getAnchor(navElements[i]).style.display = "none";
            navElements[i].onclick = handler;
        }
    }
})();