时间戳

首页 > 解决方案 > jQuery 代码不适用于 wordpress 网站

javascript - jQuery 代码不适用于 wordpress 网站

问题描述

所以我在一个网站上工作，一个带有 _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 代码所在的位置

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() 示例； 看来我的语法很好

有人能看出我做错了吗？

标签： javascriptjquerywordpress

解决方案

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

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

推荐阅读