我的JavaScript无法加载到我的WordPress HTML文件中吗？

Question

I am trying to run some simple JavaScript on one page of my WordPress site as a test, but it won't load. 我正在尝试在WordPress网站的一页上运行一些简单的JavaScript作为测试，但不会加载。

An example of the code working correctly can be found at http://fiddle.jshell.net/psflannery/XAxWv/ . 可以在http://fiddle.jshell.net/psflannery/XAxWv/中找到代码正常运行的示例。

<div class="acord">
    <h3>Summer</h3>
    <div class="acorda">
        <h3>test1</h3>
        <div>test1cont</div>
        <h3>test2</h3>
        <div>test2cont</div>
        <div>
            <p>Editorial Intro</p>
        </div>
    </div>

    <h3>Spring</h3>
    <div class="acorda">
        <h3>test3</h3>
        <div>test3cont</div>
        <h3>test4</h3>
        <div>test4cont</div>
        <h3>test5</h3>
        <div>test5cont</div>
        <div>
            <p>Editorial Intro</p>
        </div>
    </div>
</div>

<script type='text/javascript'>
jQuery(document).ready(function(){
    jQuery(".acord").accordion({
        header: "> h3",
        heightStyle: "content",
        collapsible: true,
    });
    jQuery(".acorda").accordion({
        header: "h3",
        heightStyle: "content",
        active: false,
        collapsible: true,
    });
});
</script>

Can anyone provide some advice as to why the JavaScript is not loading? 谁能提供一些关于为什么JavaScript无法加载的建议？

As an extra note, I did successfully run the code with the Javascript loading, so really at a loss as to what the problem is. 需要特别说明的是，我确实在加载Javascript时成功运行了代码，因此问题出在什么地方，实在是一头雾水。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

</body>
</html>

EDIT 编辑

I have modified the JavaScript thanks to suggestions made below. 由于以下建议，我修改了JavaScript。 My only issue now is that I get an error on my page saying Uncaught TypeError: jQuery(...).accordion is not a function . 我现在唯一的问题是我在页面上收到一条错误消息，指出Uncaught TypeError: jQuery(...).accordion is not a function 。

I have tried adding the jQuery UI dependency in both the page file and the header.php file of my WordPress theme, but neither is working. 我试图在我的WordPress主题的页面文件和header.php文件中都添加jQuery UI依赖关系，但是都无法正常工作。

<script src="code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

Does someone know how to resolve the dependency issue? 有人知道如何解决依赖性问题吗？

Answer 1

try use: 尝试使用：

jQuery(document).ready(function(){
    jQuery(".acord").accordion({
        header: "> h3",
        heightStyle: "content",
        collapsible: true,
    });
    jQuery(".acorda").accordion({
        header: "h3",
        heightStyle: "content",
        active: false,
        collapsible: true,
    });
});

Answer 2

You can inline your script in your theme's functions.php . 您可以将脚本内联到主题的functions.php 。

This assumes your scripts are enqueue -ed. 这假设您的脚本已入enqueue 。

If the accordion jquery extension library is enqueue -d with a $handle of accordion , you can write it this way. 如果手风琴jQuery的扩展库是enqueue与-d $handle的accordion ，你可以写这样的看法。

$accordion = <<<HERE
$(".acord").accordion({
    header: "> h3",
    heightStyle: "content",
    collapsible: true,
});
$(".acorda").accordion({
    header: "h3",
    heightStyle: "content",
    active: false,
    collapsible: true,
});
HERE;

wp_add_inline_script( 'accordion', $accordion );

Answer 3

On your Website you are using $ in your script whereas on website jQuery is used try this code jQuery(".acord").accordion({ header: "> h3", heightStyle: "content", collapsible: true, }); jQuery(".acorda").accordion({ header: "h3", heightStyle: "content", active: false, collapsible: true, }); 在您的网站上，您在脚本中使用$，而在网站jQuery上，请尝试使用以下代码jQuery(".acord").accordion({ header: "> h3", heightStyle: "content", collapsible: true, }); jQuery(".acorda").accordion({ header: "h3", heightStyle: "content", active: false, collapsible: true, }); jQuery(".acord").accordion({ header: "> h3", heightStyle: "content", collapsible: true, }); jQuery(".acorda").accordion({ header: "h3", heightStyle: "content", active: false, collapsible: true, });

我的JavaScript无法加载到我的WordPress HTML文件中吗？

问题描述

3 个解决方案

解决方案1
2 已采纳 2017-08-02 14:56:15

解决方案2
0 2017-08-02 15:02:12

解决方案3
-1 2017-08-02 14:55:14

我的JavaScript无法加载到我的WordPress HTML文件中吗？

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-08-02 14:56:15

解决方案2 0 2017-08-02 15:02:12

解决方案3 -1 2017-08-02 14:55:14

解决方案1
2 已采纳 2017-08-02 14:56:15

解决方案2
0 2017-08-02 15:02:12

解决方案3
-1 2017-08-02 14:55:14