JavaScript在纯HTML上工作，但在Wordpress网站上没有

Question

我正在使用Imagemap resizer js库来帮助我处理响应式地图。它由来自github dot com / davidjbradshaw / image-map-resizer的小型js库控制。它应该帮助HTML coords在即使它通常不是（例如ios Chrome）时也会变得敏感。

要开始测试，我已将脚本作者的整个示例页面复制到静态html页面中 http://www.talesofyore.com/wp-content/themes/twentyfifteen-child/map.htm。 我在/ body之前使用了以下代码：

<script type="text/javascript" src="http://davidjbradshaw.com/imagemap-resizer/js/imageMapResizer.min.js"></script> <script type="text/javascript"> $('map').imageMapResize(); </script> 如您所见，它可以正确创建html坐标。

然而，当我尝试将它添加到我的WordPress主题标题时，它会创建坐标，但它们都位于图像下方中心的同一行（我用蓝色边框设置了几个所以你可以看到它们。http://www.talesofyore.com/?p=1#comment-1

这是我迄今为止所尝试的内容： 如果我在/ head之后直接硬编码代码（img代码，地图代码和javascript代码），一切正常。

然而，在它不起作用的情况下： - 如果我使用enqueue

加入我的WP

wp_enqueue_script( 'imagemapresizer', get_template_directory_uri() . '/js/imageMapResizer.min.js', array(), '', true );

它添加了版本号并搞砸了，所以它不起作用。 - 如果我删除

它没有用。我还没有尝试过它，但我后来会越过那座桥。

但这是我不明白的。 我已经在header.php的末尾对整个代码进行了硬编码并将其放入其中      在这种情况下，甚至硬编码版本都不起作用。

任何人都可以看看吗？谢谢！

Answer 1

您是否已将脚本包含在您的功能中？

像这样我的代码：

wp_enqueue_script( 'jquery-js', EL_JS . '/jquery-1.9.1.min.js', null, '1.9.1' ,  true ); 

并使用此</body>

在<?php wp_footer() ?>之前使用html调用

Answer 2

在页面加载成功后检查inspect元素。由于不同版本的jquery，它有时无法正常工作。

Answer 3

知道了。因为排队正在搞乱脚本，我的javascript包含在标题中的条件PHP下，我猜这就是弄乱了它。诺布，我知道。