jQuery代码不适用于Wordpress网站

Question

因此，我正在一个带有_s样板的自定义wp主题网站上工作，我将自己的样式和脚本排入浏览器，不会出现任何错误；

wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

    wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(jquery), true);

    wp_enqueue_style( 'cbd-yums-style', get_stylesheet_uri() );

    wp_enqueue_script( 'cbd-yums-scripts', get_template_directory_uri(). '/js/scripts.js', array(), true ); 

scripts.js是我的jquery代码所在，并且试图更改我的主要导航项的文本颜色，因此我尝试使用此代码，因为它认为可以工作：

( function( $ ) {

    $('.primary-menu .menu-item').css('background-color', '#AED038');

} ) ( jQuery );

和相应的HTML

<nav id="site-navigation" class="main-navigation col-md-6 col-lg-6">
  <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
  <div class="menu-header-menu-container">
    <ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
      <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="#home">Home</a></li>
      <li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45"><a href="#about">About</a></li>
      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="#products">CBD Products</a></li>
    </ul>
  </div>        
</nav>

但是浏览器重新加载没有变化，所以我回到w3schools检查我的语法。我修改了jQuery css（）示例；

有人可以看到我做错了吗？

Answer 1

您必须在jquery中选择带有#前缀的id，在当前情况下，调用带有.前缀的id意味着类名，jquery正在搜索类名primary-menu，因为您没有具有类名称为primary-menu的任何元素，则样式将被忽略。

可以通过更改查询来解决问题 $('#primary-menu .menu-item').css('background-color', '#AED038');

Answer 2

我发现了问题！！  1.我没有正确加载jQuery作为依赖项  2.我不确定jQuery是在非冲突模式下编写的

所以我只是将其更改为

 jQuery(document).ready(function($){
    $('#primary-menu .menu-item').css('background-color', '#AED038');
});

以及在functions.php中，我必须加入脚本和样式

wp_enqueue_script( 'cbd-yums-scripts', get_template_directory_uri(). '/js/scripts.js', array( 'jquery' ), '20181025' ,true ); 

感谢大家帮助我缩小问题范围

Answer 3

在文档“就绪”之前，无法安全地操纵页面。-http://learn.jquery.com/using-jquery-core/document-ready/

这样更改代码：

(function($) {

    $(document).ready(function() {

        $('#primary-menu .menu-item').css('background-color', '#AED038');

    });

})(jQuery);

现在代码将在文档准备就绪后执行。

正如哈菲兹·哈姆扎（Hafeez Hamza）所指出的：将.primary-menu更改为#primary-menu。