Question

我试图在我的WordPress网站的一个页面上运行一些简单的JavaScript作为测试，但它不会加载。

可以在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>

任何人都可以提供一些关于JavaScript未加载的建议吗？

作为一个额外的注释，我使用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>

修改

我已根据以下建议修改了JavaScript。我现在唯一的问题是我的页面上出现错误Uncaught TypeError: jQuery(...).accordion is not a function。

我已经尝试在我的WordPress主题的页面文件和header.php文件中添加jQuery UI依赖项，但两者都不起作用。

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

有人知道如何解决依赖问题吗？

Answer 1

尝试使用：

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

您可以在主题functions.php中内联您的脚本。

这假定您的脚本是enqueue - ed。

如果手风琴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

在您的网站上，您在脚本中使用$，而在网站上使用jQuery尝试此代码 jQuery(".acord").accordion({ header: "> h3", heightStyle: "content", collapsible: true, }); jQuery(".acorda").accordion({ header: "h3", heightStyle: "content", active: false, collapsible: true, });

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

3 个答案: