时间戳

首页 > 解决方案 > 在页脚中有functions.php 脚本。不是头

javascript - 在页脚中有functions.php 脚本。不是头

问题描述

我有一个 JS 文件，其中包含许多可用于 DOM 操作的函数。我添加了这个来自 W3 学校的悬停事件侦听器，并收到“无法读取属性 'addEventListener' of null”错误。

  let hover = document.querySelectorAll(".center-nav a");


  hover.addEventListener("mouseenter", function( event ) {   
    // highlight the mouseenter target
    event.target.style.color = "purple";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);

由于此事件在页面 HTML 之前加载，因此进行了一些挖掘和阅读。这是有道理的，因为 main.js 文件在头部。

我的functions.php

function mikes_files(){
    wp_enqueue_style('main-style', get_stylesheet_uri(), NULL, microtime() );
    wp_enqueue_script( 'prefix-font-awesome', 'https://kit.fontawesome.com/xxxxx.js' );  
    wp_enqueue_script('main-js', get_template_directory_uri() . '/main.js', NULL, microtime() );
}



add_action('wp_enqueue_scripts', 'mikes_files', 999);

读到 999 有助于让它最后加载，但它仍然在脑海中。

我是否使用代码制作了一个不同的 js 文件并找到将其放入页脚所需的函数？

标签： javascriptphpwordpress

解决方案

更改此行：

wp_enqueue_script('main-js', get_template_directory_uri() . '/main.js', NULL, microtime() );

有了这个：

wp_enqueue_script('main-js', get_template_directory_uri() . '/main.js', array(), microtime(), true );

wp_enqueue_script有一个选项来定义是在.<head>之前还是之前加载脚本</body>。默认情况下wp_enqueue_script加载脚本<head>只需将第 5 个参数传递true给之前加载它</body>。有关更多详细信息，请参阅wp_enqueue_script文档。

此外，querySelectorAll返回 NodeList，您不能addEventListener使用 NodeList 调用。您应该遍历 NodeList，并应用于addEventListener每个元素。

推荐阅读