未捕获的ReferenceError:未定义ChangeSecondNavUlColor() - Javascript func无法正常工作

时间:2017-09-28 02:15:59

标签: javascript php jquery html css

创建WordPress网站。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>中调用函数ChangeSecondNavUlColor()以更改header.php的颜色(导航锚标记颜色为白色)如果用户不是前面的 - page.php文件

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

但是收到以下错误:

  

未捕获的ReferenceError:未定义ChangeSecondNavUlColor

.menu-secondary-menu-links li a

JavaScript

<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>

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

更新1 - 添加功能.PHP

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

}

更新2:添加HTML结构 - 我认为我没有正确地选择标记?

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');

1 个答案:

答案 0 :(得分: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允许将脚本注入标题而不是页脚。

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