jQuery 代码在 index.html 中有效，但在 index.php / wordpress 主题文件中无效

Question

我是编码新手，尤其是 javascript 和 jQuery，希望您能帮我一些忙。我正在创建一个 WP 主题，所以我编码的所有内容都编码在 WP 文件中。我经常有这样的经验，即在 index.html 中运行良好的代码在我的 WP 主题文件中不起作用，我还没有真正弄清楚为什么......所以这是最新的例子：

我的首页使用 div 分为 3 个部分。在第三部分/div 中，我想根据单击的按钮加载不同的 div。所以基本上，当按钮 1 被点击时，相应的 div1 内容被显示并且其他被隐藏。而当Button 2被点击时，对应的div2内容是可见的，其他的div是隐藏的。我总共需要四个按钮/链接和 4 个对应的不同内容的 div。

我在 codepen 上找到了一个使用 jQuery 的代码，它几乎完全符合我的功能需求。 （见下面的代码或这里是链接：https://codepen.io/whattodrink/pen/myPGpm）。当我将此代码复制并粘贴到我的 html.index 文件中时，一切正常，就像在 codepen 中一样。但是当我将相同的代码复制并粘贴到我的 wordpress 主题文件中时，jQuery 不再工作了。我读到在 WP 中你不能使用 $，所以我将所有实例都更改为 jQuery。但这也不起作用。谁能帮我解释这是为什么？

当我在 Chrome 中检查时，我收到以下错误两次： "加载资源失败：服务器响应状态为 index.js:1 404 (Not Found)"

我测试了 jQuery 是否使用来自 w3schools 的简单代码加载到我的 WP 文件中并且它确实有效，因此它应该正确添加到我的 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 

});