JavaScript 在纯 HTML 上工作，但在 Wordpress 网站上不工作答案

【问题标题】：JavaScript working on plain HTML but not on Wordpress siteJavaScript 在纯 HTML 上工作，但在 Wordpress 网站上不工作
【发布时间】：2016-01-22 06:31:31
【问题描述】：

我正在使用 Imagemap resizer js 库来帮助我制作响应式地图。它由来自 github dot com/davidjbradshaw/image-map-resizer 的小型 js 库控制。它应该有助于 HTML 坐标变得响应，即使它通常不是（例如 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 的末尾硬编码了整个代码并将其放在在这种情况下，即使是硬编码版本也不起作用。

有人可以看看吗？谢谢！

【问题讨论】：

遗漏了问题的一些重要部分......代码......该代码应该做什么......以及它现在在做什么超出“它不起作用”
对不起！现在好点了吗？

标签： javascript jquery wordpress

【解决方案1】：

您是否在函数中包含脚本？

喜欢我的代码：

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

然后你在</body> 之前用这个<?php wp_footer() ?> 调用html

【讨论】：

我尝试了入队，它实际上增加了问题，我认为是因为版本部分。但我会解决这个问题，问题出在其他地方。我已经更新了原始帖子以获得更多说明。
天啊，你刚刚给了我一个解决它的想法。由于队列弄乱了脚本，我的 javascript 包含在标头中的条件 PHP 下，我想这就是搞砸的原因。菜鸟，我知道。谢谢！

【解决方案2】：

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

【讨论】：

【解决方案3】：

知道了。因为排队弄乱了脚本，所以我的 javascript 包含在标头中的条件 PHP 下，我想这就是搞砸的原因。菜鸟，我知道。

【讨论】：