JQuery не работает на сайте, но работает на jsfiddle

Question

Следующий код, составленный stefanz отлично работает на jsfiddle, но я не могу получить его работу на моем локальном сайте WordPress ..

Вот скрипка: http://fiddle.jshell.net/9ae3T/

Вот код:

<ul class="tabs js-view-mode"> 
    <li><a href="#list">List</a></li> 
    <li><a href="#grid">Grid</a></li> 
    <li><a href="#full">Full</a></li> 
</ul> 

<section id="viewMode"> 
    <div id="list">here is list mode content</div> 
    <div id="grid">here is grid mode content</div> 
    <div id="full">here is full mode content</div> 
</section> 


$(document).ready(function(){ 
    var wrap = $('#viewMode'), 
     viewMode = $.cookie('view-mode'); 
    wrap.children().hide(); 

    $('.js-view-mode').on('click', 'a',function(e){ 
    e.preventDefault(); 
    var t = $(this), 
     type = t.attr('href'); 

    $(type).fadeIn() 
     .siblings().fadeOut(); 

    viewMode = $.cookie('view-mode', type); 

    }); 

    if (viewMode) { 
    $('.js-view-mode a[href='+ viewMode +']').trigger('click'); 
    } else { 
    $('.js-view-mode li:first a').trigger('click'); 
    } 

}); 

кто-нибудь есть предложения? Это то, что у меня в голове (viewmode.js это выше код):

<script language="javascript" type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/js/viewmode.js"></script> 
     <script language="javascript" type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/js/cookie.js"></script> 


     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 

Answer 1

Включить JQuery перед тем включая свой собственный файл, как это, очевидно, использует JQuery.

Также я надеюсь, что вы понимаете, что вы не можете поместить HTML в файл .js.

Answer 2

Вы Loding ваших JavaScript файлов перед тем JQuery который является жесткой зависимостью ..

Включить JQuery первым, а затем файлы.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"> 
</script> 
// include jQuery First 
<script language="javascript" type="text/javascript" 
    src="<?php echo bloginfo('stylesheet_directory') ?>/js/viewmode.js"> 
</script> 
<script language="javascript" type="text/javascript" 
    src="<?php echo bloginfo('stylesheet_directory') ?>/js/cookie.js"> 
</script>