2017-01-03 2 views
-4

Здесь я нашел похожие статьи, но ни один из них не был полезен. Я изучаю jQuery из codecademy, и когда я пытаюсь практиковать это сам, ничего не происходит. HTML выглядит следующим образом:Невозможно связать jQuery с HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Result</title> 
     <link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/> 
     <script type='text/javascript' src='MovieSiteBehavior.js'></script> 
    </head> 
    <body> 
     <div></div> 
    </body> 
</html> 

CSS выглядит следующим образом:

div { 
    height: 100px; 
    width: 100px; 
    background-color: #FA6900; 
    border-radius: 5px; 
} 

и Javascript выглядит следующим образом:

$(document).ready(function() { 
$('div').click(function() { 
    $('div').fadeOut('slow'); 
}); 
}); 

Там должен появиться оранжевый прямоугольник и когда и нажмите его это должен исчезнуть, но на самом деле он появляется, и я не могу заставить его исчезнуть. (тот же пример на codecademy работает просто отлично) P.S Некоторые люди обвиняют меня в плохом вопросе, и если вы считаете, что это плохо, объясните, почему.

+9

Вы должны включить 'jquery' библиотеку. Его нет. – Dekel

+0

@ Dekel, как я могу это сделать? в образце codecademy не включен jQuery. –

+1

Проверьте здесь: http://stackoverflow.com/documentation/jquery/211/getting-started-with-jquery#t=201701031645371721066 – Dekel

ответ

0

Вы Ждете» t добавьте библиотеку jQuery. Вот почему он не работает. Попробуйте добавить:

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 

<head> в

0

Добавьте это к нижней части <body> тега:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

так:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Result</title> 
     <link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/> 
     <script type='text/javascript' src='MovieSiteBehavior.js'></script> 
    </head> 
    <body> 
     <div></div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
      $('div').click(function() { 
       $('div').fadeOut('slow'); 
      }); 
      }); 
     </script> 
    </body> 
</html> 
+0

уже попробовал это, никакого эффекта. –

+0

@KingThranduil У вас есть ваш javascript под ним, внутри тегов скрипта, как показывает мое редактирование? – Travis

2

Посмотрите, как вы забыли добавить JQuery библиотеку - работает отлично. Предложение было бы использовать $(this) внутри клик слушателя, так что вы скрыть же ДИВО что вы нажали - смотрите демо ниже с 2 дивой:

$(document).ready(function() { 
 
    $('div').click(function() { 
 
    $(this).fadeOut('slow'); 
 
    }); 
 
});
div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: #FA6900; 
 
    border-radius: 5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div></div> 
 
<br/> 
 
<div></div>

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