WordPress主题开发：单击按钮时不执行javascript代码

我一直在学习如何使用php, html, css和javascript设计自定义Wordpress主题。进行更改时, 我正在使用Wordpress开发工具”本地”来查看我的网站。我是所有这些语言的初学者, 并且在导航中单击按钮时执行javascript函数时遇到问题。单击该按钮后, 应该显示一个滑出菜单。我不确定这是我的html和javascript语法是否存在问题, 或者我是否正确链接了它们(在html文件或functions.php文件中)。无论如何, 这是到目前为止我可能导致此问题的原因。

header.php

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <?php wp_head(); ?>
    <script src="js/main.js"></script>
</head> 
<body>
    <div id ="slideout-menu">
        <ul>
            <li> 
              list items
            </li>
        </ul>
    </div>
<nav>
    <ul>
        <li><a href ="#">Home</a></li>
        <li><a href ="#">About</a></li>
        <li><button onclick="showSlideOutMenu();">Projects</button></li>
    </ul>
</nav>

main.js

const slideoutMenu = document.getElementById("slideout-menu");

function showSlideOutMenu(){
    if(slideoutMenu.style.opacity == "1"){
        slideoutMenu.style.opacity = '0';
        slideoutMenu.style.pointerEvents = 'none';
    }
    else{
        slideoutMenu.style.opacity = '1';
        slideoutMenu.style.pointerEvents = 'auto';
    }
}

functions.php

<?php

function js_css_setup(){
    wp_enqueue_style('style', get_stylesheet_uri(), '/css/style.css');
    wp_enqueue_script("main", get_theme_file_uri() .'/js/main.js', NULL, microtime(), false);

}

add_action('wp_enqueue_scripts', 'js_css_setup');
?>

style.css可以正常工作, 并且在不透明度设置为1时显示菜单, 所以我排除了这种情况。如果添加到main.js, 我的网页也可以显示警报消息。还有其他可能导致问题的原因吗？

#1

首先, 你应该在wp_enqueue_script函数中将in_footer参数设置为true

你的JS代码在页面完全加载之前运行, 并在浏览器控制台中导致错误

对于加载主要样式, 可以在wp_enqueue_style中使用get_stylesheet_uri()函数

<?php
function js_css_setup() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_script( "main-js", get_theme_file_uri() . '/js/main.js', null, microtime(), true );
}

add_action( 'wp_enqueue_scripts', 'js_css_setup' );

const或let在ES6中, 你不能直接在浏览器中使用, 应该使用var。

https://tylermcginnis.com/var-let-const/

https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75

var slideoutMenu = document.getElementById("slideout-menu");

function showSlideOutMenu() {
    console.log(slideoutMenu.style.opacity);

    if (slideoutMenu.style.opacity === "1") {
        slideoutMenu.style.opacity = '0';
        slideoutMenu.style.pointerEvents = 'none';
    } else {
        slideoutMenu.style.opacity = '1';
        slideoutMenu.style.pointerEvents = 'auto';
    }
}

index.php

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <?php wp_head(); ?>
</head>
<body>
<?php wp_body_open(); ?>
<div id="slideout-menu">
    <ul>
        <li>
            list items
        </li>
    </ul>
</div>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <button onclick="showSlideOutMenu();">Projects</button>
        </li>
    </ul>
</nav>
<?php wp_footer(); ?>
</body>
</html>

我建议先学习HTML和CSS, 然后再学习JS(ES5 / ES6)

#2

将脚本更改为此

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

来源：

https://www.srcmini02.com/64530.html

#1

#2

猜你喜欢