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

Question

我正在尝试在我正在开发的 WordPress 网站上使用 jQuery 插件 HCaptions，这样当鼠标悬停在图像上时，一些信息就会出现在图像上。我已经能够将该脚本放入主题的 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 的 "noconflict" 模式。

您的图片还需要 hcaption class 和数据属性，如下所示：

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

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

Unable to get simple jquery script to work on WordPress page

javascript

wordpress

jquery

jquery-plugins