Javascript 代碼在 WordPress 主題文件中不起作用

Question

我目前正在創建一個 WP 主題並添加了一些 HTML、CSS 和 JS 來讓一些文本飛進來。我在另一個網站上找到了代碼，並為我的網站稍微修改了它。 當我在靜態 index.html 文件（沒有后端語言）上使用它時，它對我來說非常好。 但是一旦我將相同的代碼復制到我的 WordPress 文件中，JS 似乎就不再起作用了。 但是，我使用警報窗口進行了測試，以查看我是否正確鏈接了我的 JS 文件並且這有效。 只是應該使文本動畫的代碼不起作用。 任何想法為什么會這樣？ 這是我的代碼：

HTML：

<div class="content_video">
  <h2 class="ml3">Hello World</h2>
</div>

CSS

/* Content on Video Background Animnation */

.ml3 {
  font-size: 2.5em;
}

functions.php: (添加我的js文件和外部文件)

<?php

function lux_files() {
 wp_enqueue_script( "javascript2", "https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js", false );
 wp_enqueue_script( "javascript", get_template_directory_uri() . '/index.js', array(), false );
 wp_enqueue_style("font-awesome", "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
 wp_enqueue_style("google-fonts", "//fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:400,700&display=swap");
 wp_enqueue_style("main_styles", get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'lux_files');



function lux_features() {
  add_theme_support('title-tag');
}

add_action('after_setup_theme', 'lux_features');

?>

JS文件

var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline()
  .add({
    targets: '.ml3 .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 2250,
    delay: (el, i) => 150 * (i+1)
  });

Answer 1

加載 jQuery 庫，然后在您的 javascript 文件中嘗試這些代碼：

jQuery(document).ready(function() { 

    var textWrapper = document.querySelector('.ml3');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline().add({
        targets: '.ml3 .letter',
        opacity: [0,1],
        easing: "easeInOutQuad",
        duration: 2250,
        delay: (el, i) => 150 * (i+1)
    });

});