2012-01-16 4 views
81

Я реализовал некоторые JavaScript на моем сайте, но я получаю следующее сообщение об ошибке:Uncaught ReferenceError: Jquery не определен

Uncaught ReferenceError: jQuery is not defined

и

Uncaught SyntaxError: Unexpected token <

Это JavaScript, который я использую в header.php:

<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.jcarousel.min.js"></script> 
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.scrollTo.js"></script> 
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.backgroundPosition.js"></script> 
    <script type="text/javascript" src="/test/wp-content/themes/child/script/scripts.js"></script> 
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.cycle.lite.js"></script> 
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.accordian.js"></script> 

    <script type="text/javascript"> 
     jQuery(document).ready(function() { 
      jQuery('#contentGallery').cycle({ 
       fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
      }); 
     }); 
    </script> 
</head> 

<body <?php body_class(); ?>> 
<div id="page" class="hfeed"> 
    <header id="branding" role="banner"> 
      <hgroup> 
       <h1 id="site-title"><span><a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span></h1> 
       <h2 id="site-description"><?php bloginfo('description'); ?></h2> 
      </hgroup> 

      <?php 
       // Check to see if the header image has been removed 
       $header_image = get_header_image(); 
       if (! empty($header_image)) : 
      ?> 
      <a href="<?php echo esc_url(home_url('/')); ?>"> 
       <?php 
        // The header image 
        // Check if this is a post or page, if it has a thumbnail, and if it's a big one 
        if (is_singular() && 
          has_post_thumbnail($post->ID) && 
          (/* $src, $width, $height */ $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH))) && 
          $image[1] >= HEADER_IMAGE_WIDTH) : 
         // Houston, we have a new header image! 
         echo get_the_post_thumbnail($post->ID, 'post-thumbnail'); 
        else : ?> 
        <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> 
       <?php endif; // end check for featured image or standard header ?> 
      </a> 
      <?php endif; // end check for removed header image ?> 

      <nav id="access" role="navigation"> 

<div id="nav"> 
      <ul> 
       <li class="end"><a href="#contact" id="navContact" class="goto_contact"></a></li> 
       <li><a href="#context" id="navContext" class="goto_context"></a></li> 
       <li><a href="#artScience" id="navArtScience" class="goto_artScience"></a></li> 
       <li><a href="#home" id="navHome" class="goto_home"></a></li> 
      </ul> 
      <div class="clear"> 
      </div> 
     </div> 
     <div id="navPointer"> 
      <div id="controlContainer"> 
       <div id="pointer"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="contentHolder"> 
     <div id="contentGallery"> 
      <img src="Images/Gallery/london.jpg" width="1200" height="550" alt="London" /> 
      <img src="Images/Gallery/singapore.jpg" style="display: none;" width="1200" height="550" 
       alt="Singapore" /> 
      <img src="Images/Gallery/geneva.jpg" style="display: none;" width="1200" height="550" 
       alt="Geneva" /> 
     </div> 
     <div id="contentShadow"> 
     </div> 
     <div id="content"> 
      <div id="contentScroller"> 
       <div id="home" class="page"> 
        <div class="homeContent"> 
         <span class="homeHeaderText">GMR</span> 
         <div class="clear"> 
         </div> 
         <div class="homePageText"> 
          <p> very long text 1 
          </p> 
         </div> 
        </div> 
       </div> 
       <div id="artScience" class="page"> 
        <div class="pageContent"> 
         <div id="artSciencePage"> 
          <span class="headerText">About Us</span> 
          <div class="pageText"> 
           <p> 
            Insert text here. 
           </p> 
          </div> 
          <table border="0" cellpadding="0" cellspacing="0" class="linkTable"> 
           <tr> 
            <td valign="middle" height="100%"> 
             <a href="#" id="theArtLnk" class="largeArrow">The Art</a> 
            </td> 
            <td valign="middle" height="100%"> 
             <a href="#" id="theScienceLnk" class="largeArrow">The Science</a> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <div id="theArtPage" class="closed"> 
          <span class="headerText">The Art</span> 
          <div class="pageText"> 
           <a href="#" class="acc_trigger">Sensitivity</a> 
           <div class="acc_container"> 
            <p>very long text 2</p> 
           </div> 
           <div class="seperator"> 
           </div> 
           <a href="#" class="acc_trigger">Creativity</a> 
           <div class="acc_container"> 
            <p>very long text 3</p> 
           </div> 
           <div class="seperator"> 
           </div> 
           <a href="#" class="acc_trigger">Intuition</a> 
           <div class="acc_container"> 
            <p>very long text 4</p> 
           </div> 
           <div class="seperator"> 
           </div> 
           <a href="#" class="acc_trigger">Judgment</a> 
           <div class="acc_container"> 
            <p>very long text 5</p> 
           </div> 
          </div> 
          <a href="#" id="artToScienceLnk" class="largeArrow">The Science</a> 
         </div> 
         <div id="theSciencePage" class="closed"> 
          <span class="headerText">The Science</span> 
          <div class="pageText"> 
           <a href="#" class="acc_trigger_2">Methodology</a> 
           <div class="acc_container_2"> 
            <p>very long text 6</p> 
           </div> 
           <div class="seperator"> 
           </div> 
           <a href="#" class="acc_trigger_2">Research</a> 
           <div class="acc_container_2"> 
            <p>very long text 7</p> 
           </div> 
           <div class="seperator"> 
           </div> 
           <a href="#" class="acc_trigger_2">Team Approach</a> 
           <div class="acc_container_2"> 
            <p>very long text 8</p> 
           </div> 
           <div class="seperator"> 
           </div> 
           <a href="#" class="acc_trigger_2">Sharing Information</a> 
           <div class="acc_container_2"> 
            <p>very long text 9</p> 
           </div> 
          </div> 
          <a href="#" id="scienceToArtLnk" class="largeArrow">The Art</a> 
         </div> 
        </div> 
       </div> 
       <div id="context" class="page"> 
        <div class="pageContent"> 
         <span class="headerText">Expertise</span> 
         <div class="pageText"> 
          <a class="acc_trigger_3" href="#">Expertise</a> 
          <div class="acc_container"> 
           <p>very long text 10</p> 
          </div> 
          <div class="seperator"> 
          </div> 
          <a class="acc_trigger_3" href="#">Business Context</a> 
          <div class="acc_container"> 
           <p>very long text 11</p> 
          </div> 
          <div class="seperator"> 
          </div> 
          <a class="acc_trigger_3" href="#">Cultural Context</a> 
          <div class="acc_container"> 
           <p>very long text 12</p> 
          </div> 
          <div class="seperator"> 
          </div> 
          <a class="acc_trigger_3" href="#">Candidate Context</a> 
          <div class="acc_container"> 
           <p>very long text 13</p> 
          </div> 
          <div class="seperator"> 
          </div> 
          <a class="acc_trigger_3" href="#">Financial Context</a> 
          <div class="acc_container"> 
           <p>very long text 14</p> 
          </div> 
          <div class="seperator"> 
          </div> 
          <a class="acc_trigger_3" href="#">Service Context </a> 
          <div class="acc_container"> 
           <p>very long text 15</p> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div id="contact" class="page"> 
        <div class="pageContent"> 
         <span class="headerText">Contact</span> 
         <div class="pageText"> 
          <h2> 
           Tel: +44(0)1234 567 890</h2> 
          <h3> 
           Email: <a href="mailto:[email protected]">[email protected]</a></h3> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

       <h3 class="assistive-text"><?php _e('Main menu', 'twentyeleven'); ?></h3> 
       <?php /* Allow screen readers/text browsers to skip the navigation menu and get right to the good stuff. */ ?> 
       <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e('Skip to primary content', 'twentyeleven'); ?>"><?php _e('Skip to primary content', 'twentyeleven'); ?></a></div> 
       <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e('Skip to secondary content', 'twentyeleven'); ?>"><?php _e('Skip to secondary content', 'twentyeleven'); ?></a></div> 
       <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?> 

      </nav><!-- #access --> 
    </header><!-- #branding --> 

Это код, я использую в footer.php:

<div id="footerNav"> 
    <ul> 
     <li class="start"><a href="#home" class="goto_home">Home</a></li> 
     <li><a href="#artScience" class="goto_artScience">About Us</a></li> 
     <li><a href="#context" class="goto_context">Approach</a></li> 
     <li><a href="#contact" class="goto_contact">Expertise</a></li> 
    </ul> 
</div> 
+0

Покажите нам сгенерированный код, а не источник PHP, пожалуйста. –

+0

Вам нужно включить jQuery – Joe

+4

И * вы * включаете 'jquery.js', скорее всего, перед всеми другими библиотеками? –

ответ

149

JQuery должен быть первый скрипт импорта. Первый скрипт на вашей странице

<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.jcarousel.min.js"></script> 

кажется, JQuery плагин , который, вероятно, генерируется ошибкой, так как JQuery не был загружен на странице еще.

+2

Это было полезно! Я включил его после загрузки всей страницы ... – Darkeden

+5

Что такое jQuery - это первый скрипт ** на странице и есть ошибка? – Green

+0

Решил мои проблемы и в рельсах. Я сначала включил загрузку перед jquery. Но тогда решение включало сначала JQuery, а затем загрузку. –

2

Во-первых, вы, похоже, не включаете сам jQuery в заголовок, а только кучу плагинов. Что касается ошибки «<», невозможно сказать, не увидев сгенерированный HTML.

0

набор этого Jquery Миня расслоение плотной

script src="http://code.jquery.com/jquery-1.10.1.min.js" 

в WP-администратора/админ-header.php

+0

Я думаю, что ответ подходит. но я не уверен, что вопросник использует wordpress. но он решает проблему, добавляя jq в заголовок. –

+0

@ Bernd Ott У меня также возникает одна и та же проблема в wordpress, и я решил это, добавив min js thats, почему я прокомментирую эту запись. –

10

вам нужно поместить его после wp_head(); Потому что это загружает ваш jQuery, и вам нужно сначала загрузить jQuery, а затем ваш js

+0

Это нужно отметить как ответ. jQuery приходит первым для загрузки, затем включает все js впоследствии, как упоминалось в @JorgeMadafaka – JoshYates1980

+0

Очень полезно, спасибо большое :) –

3

В моем случае ошибка произошла из-за неправильной версии jquery.

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

Я изменил его:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
Смежные вопросы