0

您好，我已经在 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 不起作用？你们有什么想法吗？

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

4

2 回答 2

1

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

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

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

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

尝试在函数后将 $ 放在小括号之间

于 2015-03-13T07:57:14.947 回答
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();
    });
});
于 2015-03-13T08:10:45.627 回答