javascript - 无法让 JavaScript 函数运行

标签 javascript

我编写了以下函数并将其放在我的 WordPress 网站标题中的脚本标记之间。

function turnShopBlue(){
    var location = window.location.href;
    if(location === "MY URL GOES HERE"){
        var menuItem = document.getElementById("menu-item-3352");
        menuItem.classList.add("current-menu-item");
        //document.querySelector("#menu-item-3352").addClass("current-menu-item");
    }
}
turnShopBlue();

但由于某种原因该函数无法运行。 每次我访问在“我的 URL 在这里”中选择的 URL(页面)时,不会添加当前菜单项类。我错过了什么?

我已经尝试过三重 === 和双重 ==,但没有成功。

编辑解决方案:

我的错误是我将脚本放在了 header 中,这里的问题是脚本在整个 DOM 渲染之前运行。所以我实例化的很多变量没有好的值。 通过在header中加载脚本解决了问题;

另外,我必须把它放在 jQuery document ready 中。函数在页面加载时自动加载它。

最佳答案

始终将 Javascript 代码放在 body 标记的末尾(页脚)。这样,您的所有 HTML 都将在任何 Javascript 执行之前被解析,此外,您的外部脚本也必须放置在那里,以提高页面的加载性能。

<html>

<body>
  <tag-name id='menu-item-3352'></tag-name>

  <script>
    function turnShopBlue() {
      var location = window.location.href;
      if (location === "MY URL GOES HERE") {
        var menuItem = document.getElementById("menu-item-3352");
        menuItem.classList.add("current-menu-item");
        //document.querySelector("#menu-item-3352").addClass("current-menu-item");
      }
    }

    turnShopBlue();
  </script>

  <script external Javascript resources></script>
  <script external Javascript resources></script>
</body>

</html>

资源

$(document).ready equivalent without jQuery

关于javascript - 无法让 JavaScript 函数运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48695506/

相关文章:

javascript - 如果子项比父项宽,则添加早期省略号

javascript - 如何将 Mathematica 语法转换为 latex ?

javascript - 什么时候在 JavaScript 中使用 null 或 undefined?

javascript - 何时(或如何)使用 RactiveJS 设置 jQuery 事件处理程序?

javascript - 日期和 Html 值

javascript - 删除位于特定字符串之间的字母

javascript - 使用成员函数扩展 React.js 存储数据结构?

javascript - GetStream-IO - 具有实时数据的动态内容

JavaScript 模板“不给糖就捣蛋”?

javascript - Ionic 中单独文件中的 Controller 并包含顺序