javascript - 无法让简单的 jquery 脚本在 WordPress 页面上运行

Question

我正在尝试使用 jQuery 插件 HCaptions在我正在开发的 WordPress 网站上，这样当鼠标悬停在图像上时，一些信息就会出现在图像上。我已经能够将脚本放入主题的 function-extras.php 文件中，并且我可以看到该脚本已与所有其他脚本一起加载，但是该脚本不处理悬停根据需要事件。在此阶段，我刚刚从 HCaptions 存储库复制并粘贴了建议的默认代码，但引用了我自己的图像，如下所示:

<a href="#myToggle" class="panel">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/test-feature-image.jpg" />
</a>
<div id="myToggle" class="cap-overlay hide">
    <h5>Cupcakes</h5>
    <div class="content">
        Name: cupcakes.png<br />
        Photography: Ryun Shofner<br />
        <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> 
        <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a>
    </div>
</div>

我正在开发的网站可以通过 www.heartinhand.com.au 访问。非常感谢任何建议。

Answer 1

这里有一个脚本错误:

$(window).load(function(){
  $('.hcaption').hcaptions();
});

尝试将其更改为:

jQuery(document).ready(function($){
  $('.hcaption').hcaptions();
});

这是因为 WordPress 中包含的 jQuery 库被设置为 compatibility reasons 的“无冲突”模式。 .

您的图像还需要 hcaption 类和数据属性，如下所示:

<a href="#" data-attribute="#myToggle" class="hcaption panel">