Ошибка «$ undefined», но функция работает

-7

Я получаю сообщение об ошибке «$ undefined» из первого селектора js-файла. Я добавил ссылку JQuery как локальный файл или CDN Google. Также я попытался поместить его в начало и конец файла HTML. Также проверил сетевую часть консоли, чтобы проверить, правильно ли загружается JQuery. Но, похоже, она не распознает $. Также попытались поместить весь JS-файл в $ (document) .ready (function()) Функция работает правильно, но я все еще получаю ошибку. Я пробовал это с разными браузерами и разными системами.

$(document).ready(function() { 
 
\t var currentIndex = 0; 
 
\t var itemAmt; 
 
    
 

 
\t function cycleItems() { 
 
\t \t var item = $('.imageContainer div').eq(currentIndex); 
 
\t \t $('.imageContainer div').hide(); 
 
\t \t item.css('display', 'inline-block'); 
 
\t } 
 

 
\t var autoSlide = setInterval(function() { 
 
\t \t currentIndex += 1; 
 
\t \t if (currentIndex > $('.imageContainer div').length - 1) { 
 
\t \t \t currentIndex = 0; 
 
\t \t } 
 
\t \t cycleItems(); 
 
\t }, 3000); 
 

 
\t $('.next').click(function() { 
 
\t \t clearInterval(autoSlide); 
 
\t \t currentIndex += 1; 
 
\t \t if (currentIndex > $('.imageContainer div').length - 1) { 
 
\t \t \t currentIndex = 0; 
 
\t \t } 
 
\t \t cycleItems(); 
 
\t }); 
 

 
\t $('.prev').click(function() { 
 
\t \t clearInterval(autoSlide); 
 
\t \t currentIndex -= 1; 
 
\t \t if (currentIndex < 0) { 
 
\t \t \t currentIndex = $('.imageContainer div').length - 1; 
 
\t \t } 
 
\t \t cycleItems(); 
 
\t }); 
 
});

.imageContainer { 
 
    max-width: 400px; 
 
    background-color: black; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.imageContainer div { 
 
    background-color: white; 
 
    width: 100%; 
 
    display: inline-block; 
 
    display: none; 
 
} 
 
.imageContainer img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.next { 
 
    right: 5px; 
 
    position: absolute; 
 
} 
 

 
.prev { 
 
    left: 5px; 
 
    position: absolute; 
 
}

<!DOCTYPE html> 
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <link href="HomeStyle.css" rel="stylesheet" type="text/css"> 
 
    <script type="text/javascript" src="../HomePage/Slider.js"></script> 
 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> 
 
    <script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script> 
 
\t <script type="text/javascript" src="../HomePage/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="../HomePage/jquery-latest.js"></script> 
 
    <title>Home!</title> 
 
</head> 
 
<body> 
 
    <div id="gallery"> 
 
      <section class="slider"> 
 
       <button class="next">Next</button> 
 
       <button class="prev">Previous</button> 
 
       <div class="imageContainer"> 
 
        <div style="display: inline-block;"> 
 
         <img src="http://placeimg.com/400/200/people" /> 
 
        </div> 
 
        <div> 
 
         <img src="http://placeimg.com/400/200/animals" /> 
 
        </div> 
 
        <div> 
 
         <img src="http://placeimg.com/400/200/people" /> 
 
        </div> 
 
        <div> 
 
         <img src="http://placeimg.com/400/200/tech" /> 
 
        </div> 
 
       </div> 
 
      </section> 
 
     </div> 
 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> 
 
    <script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script> 
 
\t <script type="text/javascript" src="../HomePage/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="../HomePage/jquery-latest.js"></script> 
 
    </body> 
 
</html>

Как я могу сделать это работает без ошибок?

источник

2016-04-01 Adi

работает для меня без ошибок –

Сколько раз вы включаете jQuery? 1 достаточно;) – A1rPun

Вы серьезно пытаетесь добавить jQuery 8 раз? –

jquery должны быть включены, прежде чем все другие сценарии в зависимости от этого ...

Я полагаю, это вопрос вызывает $ is undefined ошибку ...

источник

2016-04-01 12:20:39 MarcoS

Yess! это сработало :) – Adi

Вы должны добавить библиотеку Jquery только один раз. Так как ваш код JQuery внутри $(document).ready(function(){ и }), вы можете добавить его в любом месте на вашем HTML кода, но перед любой библиотеки, использование которых JQuery (может быть, ваш slider.js делает)

источник

2016-04-01 12:25:24 Asenar

Javascript файлы загрузки в том порядке, что они добавляют к стр. Первый файл javascript, который вы добавили, - ../Homepage/slider.js, и я предполагаю, что он использует jQuery для выполнения того, что он делает. Это означает, что в какой-то момент он ссылается на $. Но подождите: jQuery еще не загружен! Это вызывает ошибку, которую вы видели, поскольку браузер, возможно, уже начал загрузку jQuery, но не выполнит ее до тех пор, пока не будут завершены предыдущие скрипты.

Если вы переместите jQuery в начало (и вам, вероятно, нужно будет включить его один раз, а не 4 раза вверху и 4 раза внизу), это должно устранить вашу проблему.

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

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     ... 
    </head> 
    <body> 
     ... 
     <script type="text/javascript" src="../HomePage/jquery.min.js"></script> 
     <script type="text/javascript" src="../HomePage/Slider.js"></script> 
    </body> 
</html>

Вы также могли бы использовать что-то вроде requireJS, чтобы обеспечить порядок загрузки скриптов, но это сложная тема выходит далеко за рамки того, что вы здесь делаете.

источник

2016-04-01 12:31:31 Maloric

Ошибка «$ undefined», но функция работает

ответ

Смежные вопросы