javascript - Uncaught ReferenceError : ChangeSecondNavUlColor() is not defined - Javascript func not working

Question

创建一个 WordPress 网站。

在 header.php 中调用函数 ChangeSecondNavUlColor() 来改变 .menu-secondary-menu- 的颜色links li a (Navigation anchor tags color to white) 如果用户不是 front-page.php

在 php 代码中，我有一个 if 语句来检查是否在首页上，如果是的话，我正在使用 echo $blackBg 更改导航的背景颜色；但是对于导航标记颜色(因为它是嵌套的)，我决定使用 javascript 获取 DOM。

但出现以下错误:

Uncaught ReferenceError: ChangeSecondNavUlColor is not defined

<header class="main-header">

    <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>               
    </div>
<div id="sidebar-nav">              
    <div class="logo-nav-one-wrap">
        <nav class="nav-one">
            <li id="primary-headline" class="logo-icon"><img src="#"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></li>

            <ul>
                <?php 

                    $args = array(
                        'theme_location' => 'primary'

                    );
                    wp_nav_menu($args);
                ?>


            </ul>


            </nav>

    </div>

    <nav class="nav-two home-nav">
    <!--  CHANGE THE BACKGROUND COLOR OF NAV TO BLACK IF NOT HOMEPAGE -->
    <?php if(!is_front_page()) { 

        $blackBg =  "background-black-nav";  ?>

    <script type="text/javascript">  ChangeSecondNavUlColor(); </script>

    <?php } ?>
    <div class="nav-two-wrap <?php echo $blackBg;?>">

        <?php       
            $walker = new Nav_Walker_Nav_Menu;

            $args = array(
                'theme_location' => 'secondary',
                'walker' => $walker

            );
            wp_nav_menu($args);
        ?>          
    </div>

    </nav>



</div>

JavaScript

function ChangeSecondNavUlColor() {
    jQuery(".menu-secondary-menu-links li a").css("color","white !important");
    alert("Aasd");

}

为什么我会收到此错误以及如何解决该问题？

更新 1 - 添加 FUNCTIONS.PHP

function ipe_resources() {
    // Add stylesheet
    wp_enqueue_style('style', get_template_directory_uri().'/css/default.css');

    // Add javascript
    wp_enqueue_script('script_js', get_template_directory_uri().'/js/ipe_script.js', array('jquery'), '2017', true );

}
add_action('wp_enqueue_scripts', 'ipe_resources');

更新 2:添加 HTML 结构 - 我想我没有正确选择 A 标签？？

<div class="menu-secondary-menu-links-container">

    <ul id="menu-secondary-menu-links" class="menu">
        <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a title="Our Programs" href="http://localhost/wordpress/courses/">Courses</a></li>
        <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a title="Event Schedule " href="http://localhost/wordpress/events/">Event Calendar</a></li>
        <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a title="Registration Open" href="http://localhost/wordpress/book-a-seminar/">Book A Seminar</a></li>
        <li id="menu-item-158" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158"><a title="Registration Open" href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li>
    <li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-293"><a href="http://localhost/wordpress/gallery/">Gallery</a></li>
</ul>
</div>

Answer 1

你需要这行代码:

wp_enqueue_script('script_js', get_template_directory_uri().'/js/ipe_script.js', array('jquery'), '2017', true );

到

wp_enqueue_script('script_js', get_template_directory_uri().'/js/ipe_script.js', array('jquery'), '2017', false);

将 true 更改为 false 允许将脚本注入(inject)页眉而不是页脚。

供引用:https://developer.wordpress.org/reference/functions/wp_enqueue_script/

另一个解决方案是尝试这个:

<script type="text/javascript">  

window.onload = function() {
   ChangeSecondNavUlColor(); 
}

</script>

对于你的脚本试试这个:

function ChangeSecondNavUlColor() {
    jQuery("#menu-secondary-menu-links li a").css({"color": "white"});
    alert("Aasd");
}