Как объявить переменные в jQuery правильным способом

Question

У меня есть этот код jQuery, который работает в скрипке, но не на моем сайте!

Я работаю на этой основе JQuery

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js?ver=4.4.2 

но мне кажется, что переменные должным образом не объявлены в соответствии с console.log в Fox & я получаю следующее сообщение об ошибке в Chrome.

Неопределенная переменная: пагинация Неопределенная переменная: лис Undefined переменной: следующий Undefined переменной: toHighlight Undefined переменной: предыдущая

$(document).ready(function() { 
    var $pagination = $('.qpagination'); 
    var $lis = $pagination.find('li:not(#qprev, #qnext)'); 
    $lis.filter(':gt(4)').hide(); 
    $lis.filter(':lt(5)').addClass('active'); 

    var $next = $('#qnext').click(function() { 
     var idx = $lis.index($lis.filter('.active:last')) || 0; 

     var $toHighlight = $lis.slice(idx + 1, idx + 6); 
     if ($toHighlight.length == 0) { 
      $prev.show(); 
      return; 
     } 

     $next.show(); 
     $lis.filter('.active').removeClass('active').hide(); 
     $toHighlight.show().addClass('active') 
    }); 

    var $prev = $('#qprev').click(function() { 
     var idx = $lis.index($lis.filter('.active:first')) || 0; 

     var start = idx < 4 ? 0 : idx - 4; 
     var $toHighlight = $lis.slice(start, start + 5); 
     if ($toHighlight.length == 0) { 
      $prev.hide(); 
      return; 
     } 

     $next.show(); 
     $lis.filter('.active').removeClass('active').hide(); 
     $toHighlight.show().addClass('active') 
    }); 
}); 

это demo кода на Скрипке. он отлично работает на Fiddle!

А вот website я работаю (Нажмите Оставьте мне комментарий коробку)

Answer 1

Обновленный Ваш код немного https://jsfiddle.net/o3das45q/4/
Добавлено

var $next = $('#qnext'); 
var $prev = $('#qprev');