jQuery Код работает в индексе. html, но не в индексе. php / файлы тем Wordpress

Question

Я новичок в кодировании, особенно javascript и jQuery и надеюсь, что вы мне чем-нибудь поможете. Я создаю тему WP, поэтому все, что я пишу, кодируется в файлах WP. Я часто сталкивался с тем, что код, который прекрасно работает в индексе. html не работает в моих файлах тем WP, и я до сих пор не понял, почему ... Так вот самый последний пример:

Моя первая страница разделена на 3 раздела с использованием div. В третьем разделе / ​​div я хочу загрузить разные div в зависимости от того, какая кнопка нажата. Таким образом, при нажатии кнопки 1 отображается соответствующий контент div1, а остальные скрываются. При нажатии на кнопку 2 соответствующий контент div2 виден, а остальные div скрыты. Мне нужно всего четыре кнопки / ссылки и 4 соответствующих элемента с различным содержимым.

Я нашел код, использующий jQuery на codepen, который почти точно выполняет то, что мне нужно в отношении функций. (См. Код ниже или вот ссылка: https://codepen.io/whattodrink/pen/myPGpm). Когда я скопировал и вставил этот код в мои html .index файлы, все работало нормально, как в коде ручки. Но когда я копирую и вставляю тот же код в мои файлы темы WordPress, jQuery больше не работает. Я прочитал, что в WP вы не можете использовать $, поэтому я изменил все экземпляры на jQuery. Но это тоже не работает. Кто-нибудь может мне помочь, почему это так?

Когда я проверяю это в Chrome, я дважды получаю следующую ошибку: «Не удалось загрузить ресурс: сервер ответил с состоянием индекса. js: 1 404 (Не найдено)» *

Я проверил, загружает ли jQuery в мои файлы WP простой код из w3schools, и он работает, поэтому его следует правильно добавить в мою тему WP.

Вот теперь код:

HTML:

  <a href="#" class="button">
    Button 1
  </a>
  <a href="#" class="button">
    Button 2
  </a>
  <a href="#" class="button">
    Button 3
  </a>
  <a href="#" class="button">
    Button 4
  </a>
</div>

<div class="content">
  <div class="content-1 active">Jana 1 Content</div>
  <div class="content-2">Button 2 Content</div>
  <div class="content-2">Button 3 Content</div>
  <div class="content-2">Button 4 Content</div>
</div> 

CSS:

a.button {
  display:inline-block;
  width:100px;
  height:50px;
  background-color:blue;
  color:#fff;
  line-height:50px;
  text-align:center;
  text-decoration: none;
}

a.active {
  background-color:red;
}

.content {
  margin-top:30px;
}

div[class*="content-"] { 
  display:none;
}

div.active { 
  display:block;
}

jQuery:

jQuery('.button').first().addClass('active');

jQuery('.button').click(function(){
  var jQuerythis = jQuery(this);
  jQuerysiblings = jQuerythis.parent().children(),
  position = jQuerysiblings.index(jQuerythis);
  console.log (position);

  jQuery('.content div').removeClass('active').eq(position).addClass('active');

  jQuerysiblings.removeClass('active');
  jQuerythis.addClass('active');
})

как я добавил его в свою тему WP:

<?php

function lux_files() {
 wp_register_script( "index", plugins_url( "index.js", __FILE__), array( "jquery"));
 wp_enqueue_script ( "index");
 wp_enqueue_script( "javascript", get_template_directory_uri() . '/index.js', array(), false );
 wp_enqueue_style("font-awesome", "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
 wp_enqueue_style("google-fonts", "//fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:400,700&display=swap");
 wp_enqueue_style("main_styles", get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'lux_files');



function lux_features() {
  add_theme_support('title-tag');
}

add_action('after_setup_theme', 'lux_features');

?>

Answer 1

Перед выполнением кода jQuery вы должны быть уверены, что документ готов. Для этого сделайте следующее:

$(function () { 

// Your jQuery code here 

});