Код jQuery не работает с сайтом wordpress
Итак, я работаю над сайтом, настраиваемой темой wp с шаблоном _s, я поставил в очередь свои стили и скрипты, которые браузер улавливает без ошибок;
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 ();
Кто-нибудь может увидеть, что я делаю неправильно?
не работает, я пробовал: $ ('. primary-menu .menu-item'). css ('cssText', 'background-color: # AED038! important;'); , я нашел здесь использование cssText stackoverflow.com/questions/1986182/…
@SumeshTG нет необходимости использовать !important - встроенный CSS имеет самый высокий вес специфичности, поэтому использование! Important является избыточным.
primary-menu - это идентификатор, а не класс, используйте как # primary-menu, а не как .primary-menu
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
вам нужно выбрать идентификаторы с префиксом # в jquery, в текущей ситуации вызовите в идентификаторе с префиксом ., который означает имя класса, jquery ищет имя класса primary-menu, так как у вас нет элемента с именем класса primary-menu, стиль игнорируется.
проблему можно решить, изменив запрос
$('#primary-menu .menu-item').css('background-color', '#AED038');
спасибо, что указали на это, и я даже надел очки на lol, но это все еще не сработало, $ ('# primary-menu .menu-item'). css ('background-color', '# AED038 '); Правильно ли я говорю, что теоретически это должно 1. искать элемент с идентификатором 'primary-menu' 2. искать дочерний элемент с классом 'menu-item' 3. изменять цвет фона элемента на # aed038.
Страницей нельзя безопасно манипулировать, пока документ не «готов». - http://learn.jquery.com/using-jquery-core/document-ready/
Измените свой код следующим образом:
(function($) {
$(document).ready(function() {
$('#primary-menu .menu-item').css('background-color', '#AED038');
});
})(jQuery);
Теперь код будет выполняться, когда документ будет готов.
И, как заметил Хафиз Хамза: замените .primary-menu на #primary-menu.
Какие? Сокращение для $(document).ready(function() { - $(function() {. Не могли бы вы уточнить?
Из первого ответа, относящегося к (function($){: Код в вашем вопросе не имеет ничего общего с .ready (). Скорее, это немедленно вызываемое функциональное выражение (IIFE) с объектом jQuery в качестве аргумента.
сортировать по голосам - и даже в этом случае проблема не в том, как они объявили $(document)
О да, это может быть проблемой, WordPress помещает теги скриптов в голову. См. Этот JSfiddle, демонстрирующий мою точку зрения: jsfiddle.net/jrducf6v/3 Если вы можете опровергнуть это, я удалю свой ответ.
у вас ошибочный тест - jQuery / JavaScript синхронный - он будет принимать последние заданные значения .. пример 1: jsfiddle.net/hjxv26de работает и пример 2: jsfiddle.net/8ekwbpur работает
Нет, тест действителен, я нацелил разные элементы по идентификатору: #menu-item-44, #menu-item-45 и #menu-item-46, чтобы он не отменял. Второй JSfiddle работает только потому, что load type установлен на on load. Я изменил тип загрузки вашего JSfiddle, и он не работает: jsfiddle.net/8ekwbpur/1
НАШЕЛ ПРОБЛЕМУ !! 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 );
спасибо всем за то, что помогли мне сузить проблему
Почему вы не добавили jQuery в свои зависимости? `wp_enqueue_script ('cbd-yums-scripts', get_template_directory_uri (). '/js/scripts.js', array ('jquery'), true);` И почему jquery не является строкой в этом ->
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(jquery), true);?