javascript - 未捕获的类型错误 : Cannot read property 'firstElementChild' of undefined when expanding posts in a certain order

Question

你们中的任何人都可以帮我解决 Javascript 问题吗？我正在尝试为我的网站编写一个帖子扩展功能，出于某种原因，每当我扩展第一篇文章时，第二篇文章将不再扩展，而是重定向到线程页面上的完整文章。如果我展开第二个帖子然后展开第一个帖子，我就没有问题。

这是加载页面时运行的代码:

function postExpansionPrep(){
    if(!document.body.className){
        var links = document.getElementsByClassName("abbrev");
        for (var i = 0; i < links.length; i++ ){
            (function(e) {
                links[e].firstElementChild.addEventListener("click", function(a){ expandPost(links[e].firstElementChild); a.preventDefault(); }, true);
                console.log(links[e].firstElementChild.href);
            })(i);
        }
    }
}

下面是当您点击链接展开帖子时运行的代码。

function expandPost(link){
    if(link.hash){
        $.get(link, function(data) {
            var loadedPost = $(data).find("#reply" + link.hash.replace("#",""));
            document.getElementById("reply" + link.hash.replace("#","")).lastElementChild.innerHTML = $(loadedPost).find("blockquote").last().html();
        });
    }
    else{
        $.get(link, function(data) {
            var loadedPost = $(data).find("#parent" + link.pathname.substring(link.pathname.lastIndexOf("/")+1));
            document.getElementById("parent" + link.pathname.substring(link.pathname.lastIndexOf("/")+1)).lastElementChild.innerHTML = $(loadedPost).find("blockquote").last().html();
        });
    }
}

您可以在此处查看实际问题:http://www.glauchan.org/test/

顺便说一下，该功能是可选的，因此您需要在 Board Options 菜单中启用 Post Expansion。

Answer 1

document.getElementsByClassName method返回一个事件的节点列表。因此，links 将发生变化，并且当处理程序被触发时，e 位置可能不再有项目 - 导致 undefined 值在访问其 firstElementChild 属性时抛出错误。

您不需要从 links 列表中获取当前元素。通过 a.target 或仅通过 this 动态获取它:

function postExpansionPrep() {
    if (document.body.className)
        return;
    var links = document.getElementsByClassName("abbrev");
    for (var i = 0; i < links.length; i++ ) {
        var child = links[i].firstElementChild;
        if (!child) // could be null as well
            continue;
        child.addEventListener("click", function(e) {
            expandPost(this);
            e.preventDefault();
        }, true);
        console.log(child.href);
    }
}

顺便说一句，因为你有可用的 jQuery，所以你应该使用它，尤其是对于附加的事件处理程序:

if (!document.body.className)
    $(".abbrev > :first-child").click(function(e) {
        expandPost(this);
        e.preventDefault();
    });