为什么此jQuery图像映射在WordPress上不起作用

Question

您好，我在Codepen上制作了一个jQuery图像映射，但是当我将其转移到我的客户端WordPress时，它不再起作用了？

WordPress网站是由创世纪构成的，我认为这可能是造成问题的原因。我还用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不起作用？ 你们对为什么有任何想法吗？

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

Answer 1

可能是因为在第三行有$：var toHide = $（this）.attr（'data-hide'）;

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

另外，您的网站上的代码中没有$：

jQuery（document）.ready（function（）{

尝试在功能后将$放在小括号之间

Answer 2

始终检查您的浏览器控制台是否抛出错误。 在这种情况下，我看到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();
    });
});