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

Question

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

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

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

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

尝试将其更改为 jQuery。可能有用。

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

jQuery(文档).ready(函数() {

尝试将 $ 放在函数后的小括号中

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();
    });
});

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

Why doesn't this jQuery image map not work on WordPress

javascript

css

wordpress

jquery

genesis