Почему эта карта изображений jQuery не работает на WordPress

Question

Привет, я сделал карту изображения jQuery на codepen, но когда я передаю ее моим клиентам. Установка 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) домашняя страница с простыми крючками, а затем добавил CSS с помощью тега пользовательского тела для домашней страницы в образцах gensis стилей. но JQuery не работает? у вас, ребята, есть какие-то идеи о том, почему?

Спасибо за ваше время и силы, как всегда!

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

Answer 2

Возможно, это из-за $ на третьей строке: var toHide = $ (this) .attr ('data-hide');

Попробуйте изменить его на jQuery. Это может сработать.

Кроме того, ваш сайт не имел $ на ваш код:

JQuery (документ) .ready (функция() {

попытаться положить $ между небольшими фигурными скобками после функции