未介绍的参考文献:未定义更改eCondnavulcolor() - JavaScript func无法正常工作

Question

创建一个WordPress网站。

具有在header.php中调用的函数ChangeSecondNavUlColor()，以更改.menu-secondary-menu-links li a的颜色（导航锚标记为White，如果用户不是前页面.php.php

在PHP代码中，我有一个IF语句检查是否在首页上，如果是，我正在使用Echo $ BlackBG更改NAV的背景颜色；但是对于导航，标签颜色（由于嵌套），我决定使用JavaScript抓住DOM。

但是遇到以下错误：

未介绍的参考文献：未定义的更改未定义

<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-添加function.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 );

to

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

更改为false，可以将脚本注入标题而不是页脚。

参考：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");
}