it-swarm.com.ru

Uncaught ReferenceError: $ не определено

Я получаю это сообщение об ошибке при попытке создать слайдер изображений JQuery. 

Uncaught ReferenceError: $ не определено

Вот моя НОВАЯ кодировка (ПРИМЕЧАНИЕ, что я переместил скрипт на страницу, это было предложено Adobe.):

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Green Cold-Formed Steel | Home</title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    text-align: left;
}
body {
    background-color: #999;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #060;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
}
h1 {
    font-size: 14px;
    color: #060;
}
h2 {
    font-size: 12px;
    color: #999;
}
h3 {
    font-size: 9px;
    color: #FFF;
}
#next {
    background-image: url(Assets/slideshow/r_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slideshowwrapper {
    display: block;
    height: 500px;
    width: 1000px;
    margin: auto;
}
#container {
    background-color: #FFC;
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: auto;
}
#prev {
    background-image: url(Assets/slideshow/L_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slider {
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: hidden;
    position: absolute;
}
#NavBar {
    display: block;
    height: 50px;
    width: auto;
    position: relative;
    padding-bottom: 5px;
    float: none;
    vertical-align: middle;
}
</style>
</head>

<body bgcolor="#999999" text="#000000">

<table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px">
  <tr>
    <th height="132" align="left" scope="col">&nbsp;</th>
    <th scope="col"><div class="spacer" id="spacer"></div>
      <div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a></div>
    <hr></th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th width="5%" align="left" scope="col">&nbsp;</th>
    <td width="85%" align="left" valign="top" scope="col">
    <div class="Navigation Bar" id="NavBar"><img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down"></div>

    <div id="slideshowwrapper">
      <div id="container">
        <div class="controller" id="prev"></div>
        <div id="slider">
            <img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt=           "Hyatt Apartments">
            <img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas">
            <img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200">
            <img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run">
            <img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof">
            <img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> </div>
        <div class="controller" id="next"></div>
      </div>
    </div></td>
    <th width="10%" scope="col">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</p>
<script type="text/javascript" src="JS/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle.all.js"></script>
<script>
$(function(){
        $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });
});
</script>
</body>
</html>

Мой путь к папке JS для моего сайта (локально) выглядит следующим образом: C:\Users\Andrew\Desktop\GCFS\JS

Я новичок в мире программирования, но то, чего я пытаюсь достичь, довольно просто. Насколько я знаю, мне не нужно иметь готовую функцию, и JavaScript должен запускаться автоматически. Спасибо вам за вашу помощь! 

Из комментария

Когда я попробовал это, это также не удалось

<title>Green Cold-Formed Steel | Home</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="JS/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
 $(function() {  
   $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' });
}); 
</script>
8
MasterFuel

Решение:

1) Используйте Google CDN для загрузки jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

2) Насколько я знаю о плагине Cycle, он совместим с jQuery v1.5-v1.7, потому что большинство методов было объявлено устаревшим в jQuery 1.8+. По этой причине я использовал v1.5 Google CDN jquery в пункте 1. В большинстве примеров плагинов циклов используется jquery 1.5.

3) Очистите кеш вашего браузера, это основной виновник большую часть времени.

4) Пожалуйста, проверьте загрузку jquery, используя код ниже

if(typeof jQuery!=='undefined'){
    console.log('jQuery Loaded');
}
else{
    console.log('not loaded yet');
}

Major Edit:

Причина ошибки довольно проста:

Вы вызвали метод цикла перед загрузкой jquery.

плагин цикла вызовов на DOM готов .. 

$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });  
});
11
writeToBhuwan

2 вопроса.

Похоже, ваш jQuery не был загружен должным образом.

Вы обычно видите эту ошибку

Uncaught ReferenceError:$ is not defined

когда jQuery не был правильно включен на вашей странице.

Попробуйте использовать jQuery из CDN, и это должно решить вашу проблему

Замещать 

<script src="JS/jquery-1.10.1.min.js"></script>

с одним из CDN

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

ПРИМЕЧАНИЕ: если вы тестируете из файловой системы, вам нужно добавить http: к указанному выше URL-адресу, иначе произойдет сбой

Затем ваш файл сценария находится перед HTML. Поэтому необходимо содержать код в обработчике DOM Ready.

$(function() {
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 
        next:   '#next', 
        prev:   '#prev' 
    });
});

Насколько я знаю, на Slider ссылались, когда я создавал div Id.

Нет. Если ваш сценарий был включен непосредственно перед телом, вы не можете заключить его в обработчик Ready. Но в вашем случае это присутствует в голове. Поэтому, когда скрипт запускается, этот конкретный элемент все еще отсутствует в DOM

Проверьте Fiddle

9
Sushanth --

Там может быть две проблемы:

1) JQuery, возможно, не был загружен должным образом. Вы можете проверить это с помощью Chrome. Введите $ или jQuery, чтобы проверить, правильно ли он загружен .Chrome Console

2) Это основано на моем опыте работы с некоторыми JQuery.js, которые были бы связаны с другими библиотеками JS, где $ не будет поддерживаться, и вы вынуждены использовать jQuery вместо $ Проверьте строку ниже в JS-файл, который вы загрузили в свой проект.

window.jQuery = window.$ = jQuery;

Я вижу, что с помощью http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js у меня не сработало, но я использовал http: // code .jquery.com/jquery-1.7.2.min.js

Ниже приведена единственная часть вашего кода, которую я редактировал, и она стала работать нормально для меня.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
3
Raghav

Как дополнение. Если вы используете $ (Jquery) в вашем файле .js. Логически все библиотеки или фреймворки должны быть перед этим файлом .js.

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
1
Sergii Lisnychyi

У меня была эта проблема, но ее причина сильно отличалась от сценариев, о которых говорилось выше .. Мой сайт работал везде, кроме моего старого Android (2.2) . Оказалось, что это устройство отклоняет сертификат https в code.jquery. com CDN, поэтому он не загружал JQuery. Исправление заключалось в том, чтобы вместо этого загружать ресурсы JQuery из https Google CDN (используя URL-адреса, названные другими выше).

0
Frank Carnovale