Как решить ошибку скрипта, всплывающую в браузере?

Question

[Андрей Скрипник]

Добрый вечер, я абсолютный ноль в javascript и jQuery, вставил кусок скрипта на страницу (крутящаяся шестеренка при скролле), в режиме кастомайзера все работает, но как только выхожу из него, в консоли браузера всплывает ошибка

Uncaught TypeError: $ is not a function

собственно код

<script id="rendered-js">
          var transformElm = function ($elm, $val) {
  $elm.css({
    '-moz-transform': $val,
    '-ms-transform': $val,
    '-o-transform': $val,
    'transform': $val,
    '-webkit-transform': $val });

};
var watchDoubleGear = function () {
  var $doc = $(document);
  $doc.on('scroll', function () {
    var $doubleGear = $('.double-gear'),
    $innerGear = $doubleGear.find('.inner-gear'),
    $outerGear = $doubleGear.find('.outer-gear'),
    st = $doc.scrollTop(),
    igRotate,ogRotate;

    // $self.initRotateAttr($innerGear);
    //$self.initRotateAttr($outerGear);

    transformElm($innerGear, 'rotate(' + st * -1 + 'deg)');
    transformElm($outerGear, 'rotate(' + st / 5 + 'deg)');

  });
};

watchDoubleGear();
        </script>

Ошибка относится к следующим строкам:

var $doc = $(document);

watchDoubleGear();

Подскажите, пожалуйста, в чем проблема?

Comments

[Dima Polos]

jQuery как подключали?

Answer 1

[Денис Янчевский]

А так?

<script id="rendered-js">
(function ($) {
	$(document).ready(function () {
		var transformElm = function ($elm, $val) {
			$elm.css({
				'-moz-transform': $val,
				'-ms-transform': $val,
				'-o-transform': $val,
				'transform': $val,
				'-webkit-transform': $val});

		};
		var watchDoubleGear = function () {
			var $doc = $(document);
			$doc.on('scroll', function () {
				var $doubleGear = $('.double-gear'),
						$innerGear = $doubleGear.find('.inner-gear'),
						$outerGear = $doubleGear.find('.outer-gear'),
						st = $doc.scrollTop(),
						igRotate, ogRotate;
				// $self.initRotateAttr($innerGear);
				//$self.initRotateAttr($outerGear);

				transformElm($innerGear, 'rotate(' + st * -1 + 'deg)');
				transformElm($outerGear, 'rotate(' + st / 5 + 'deg)');
			});
		};

		watchDoubleGear();
	});
})(jQuery);
</script>

Comments

[Андрей Скрипник]

заработало, большое спасибо!

Answer 2

[andrash_]

у тебя скрипт отрабатывает раньше подключения jQuery
Если подключаешь скрипты в functions.php , поставь зависимость к jquery

wp_enqueue_script( 'custom-common', get_template_directory_uri() . '/js/common.js', array('jquery'), null, true );

Comments

[Андрей Скрипник]

у меня это прописано