Question

我正在尝试在我正在开发的WordPress网站上使用jQuery插件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>文件中排队脚本，我可以看到脚本已经加载了所有其他脚本，但是脚本没有根据需要处理悬停事件。在这个阶段，我刚刚从HCaptions存储库复制并粘贴了建议的默认代码，但引用了我自己的图像，如下所示：

public static boolean getGridCell ( final boolean[][] grid, final int row, final int col )
{
     // bounds check:
     if((row < 0) || (row >= grid.length))
         return false;
     if((col < 0) || (col >= grid[row].length))
         return false;

     return grid[row][col];
}

我正在处理的网站可以在www.heartinhand.com.au访问。任何建议都非常感谢。

Answer 1

这里有一个脚本错误：

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

尝试将其更改为：

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

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

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

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

无法获得简单的jquery脚本来处理WordPress页面

1 个答案: