为什么这个 jQuery 图像映射不适用于 WordPress答案

【问题标题】：Why doesn't this jQuery image map not work on WordPress为什么这个 jQuery 图像映射不适用于 WordPress
【发布时间】：2015-05-15 14:01:47
【问题描述】：

您好，我已经在 codepen 上制作了一个 jQuery 图像映射，但是当我将它传输到我的客户 WordPress 安装时它不再起作用？

WordPress 网站是用 genesis 制作的，我认为这可能会导致问题...我还将 $ 替换为 jQuery 以解决冲突问题。

笔：http://codepen.io/naniio/pen/QwVXWG

jQuery:

jQuery(document).ready(function($) {
   jQuery(".clickable").click(function() {
       var toHide = $(this).attr('data-hide');
       jQuery(".map").toggle();
       jQuery("#" + toHide).toggle();
   });

   jQuery(".hide").click(function() {
       jQuery(".map").toggle();
       jQuery(this).toggle();
   });

});

网站 www.shakesafe.co.nz

我用简单的钩子在主页添加了代码（HTML + JS），然后在 gensis 示例样式表中为主页添加了带有自定义正文标记的 CSS。但是 Jquery 不起作用？你们有什么想法吗？

感谢您一如既往的时间和努力！

【问题讨论】：

标签： javascript jquery css wordpress genesis

【解决方案1】：

始终检查您的浏览器控制台是否抛出错误。在这种情况下，我看到了 Uncaught TypeError: undefined is not a function 消息。该错误出现在您页面的第 112 行，如果您仔细检查，您使用的是 $ 而不给它分配 jQuery 对象，因此会导致错误：

jQuery(document).ready(function() {
     jQuery(".clickable").click(function() {
       var toHide = $(this).attr('data-hide');  // Line 112 where error is from
         jQuery(".map").toggle();
         jQuery("#"+toHide).toggle();
    });

     jQuery(".hide").click(function() {
       jQuery(".map").toggle();
       jQuery(this).toggle();
    });
});

将$ 替换为jQuery，即var toHide = jQuery(this).attr('data-hide');。

或者，您可以告诉 jQuery，您正在使用 $ 来代替 jQuery 对象，从而为您调用的每个实例节省 5 个字符：

jQuery(document).ready(function($) {
     $(".clickable").click(function() {
       var toHide = $(this).attr('data-hide');
         $(".map").toggle();
         $("#"+toHide).toggle();
    });

     $(".hide").click(function() {
       $(".map").toggle();
       $(this).toggle();
    });
});

【讨论】：

【解决方案2】：

可能是因为第 3 行的 $： var toHide = $(this).attr('data-hide');

尝试将其更改为 jQuery。它可能会起作用。

您的网站的代码中也没有 $：

jQuery(document).ready(function() {

试着把 $ 放在函数后面的小括号之间

【讨论】：

这不是真的——OP已经将$委托给jQuery对象（在第一行，jQuery(document).ready(function($)...），所以使用$代替jQuery对象应该没有问题。
@Terry 你的回答是我的更详细的形式。在评论它不正确之前，请仔细检查我的答案。