Question

我具有可以下载免费资源以及应用或修改我的作品的功能。我使用此功能通过将所有div设置为display=none并单击按钮来创建自己的网站，相应的div显示style将变为block。

一切正常，直到我添加了音乐播放器，创作者使用了更高的jQuery库（3.2.1> 1.5.2）。

一切都像以前一样运作良好，但是当我单击按钮播放音乐时，我无法返回或进入其他菜单。

调试器错误为：

未捕获的TypeError：document.getElementById不是函数

但是，如果我不单击播放按钮，则一切正常。

function openPage(pageName) {
  var i;
  var x = document.getElementsByClassName("page");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(pageName).style.display = "block";  
}

Answer 1

jQuery不会阻止原始Javascript正常运行。
而且由于您的代码只是Javascript，而且从它的外观来看，其中没有错误，因此很难弄清楚为什么会出现这种错误。这与Jquery无关。

唯一可预见的错误是：

pageName 不作为参数传递；

pageName 已传递，但不是字符串；

文档中不存在ID等于 pageName 的值的元素。

您可以通过以下方式稍稍改善代码：

function openPage(pageName) {
    Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
    document.getElementById(pageName).style.display = "block";  
};

您可以通过添加一些检查来使其“更加全面”：

function openPage(pageName) {
    if (pageName && (typeOf pageName === 'string')) {
        Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
        var target = document.getElementById(pageName);
        if (target) { target.style.display = "block" };
    }
};

当检查失败时，yu也可以通过登录到控制台进行调试来改进它：

function openPage(pageName) {
    if (pageName && (typeOf pageName === 'string')) {
        Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
        var target = document.getElementById(pageName);
        if (target) { 
            target.style.display = "block" 
        } else {
            console.log('No element found, with the ID of:' , pageName)
        };
    } else {
        console.log('Error in openPage() : The provided [pagename] argument must be a [string]. Provided value for [pageName] is:', pageName);
    }
};

如何使此jQuery代码在3.2.1版上工作

1 个答案: