Как поместить jquery в отдельный файл?

Я занимаюсь поиском в течение последнего часа или около того, но, похоже, не может найти решение этой проблемы. Я только что закончил курс jQuery из codecademy, и теперь я работаю над проектом. По какой-то причине мой код JQuery код не будет работатьКак поместить jquery в отдельный файл?

JQuery:

$(document).ready(function(){ 
$("div").css("border", "3px solid red"); 
$(".storyblocks").mouseenter(function(){ 
    $(this).animate({ 
     height: "+= 20px" 
     width: "+= 20px" 
    }); 
}); 

$(".storyblocks").mouseleave(function(){ 
    $(this).animate({ 
     height: "-= 20px" 
     width: "-= 20px" 
    }); 
}); 
});

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>Project Website</title> 
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="script.js"></script> 

</head>

Я добавил $("div").css("border", "3px solid red");, чтобы проверить, если дивы имеют красную границу, и до сих пор не повезло. Некоторые говорят, что мне не нужен $ (документ). Уже, но я не понимаю, почему нет.

Помогите?

источник

2013-11-08 user2967568

вы уверены, что ваш путь к script.js правильно и файл загружается? Вы можете использовать инструменты Firebug/Chrome, чтобы убедиться, что файл загружается. – Tommy

Проверьте, есть ли файл внутри папки, например: js/script.js –

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

Вот ваш код, но с необходимыми запятых, и правильный синтаксис для анимации свойств:

http://jsfiddle.net/4xfAZ/2/

Запятая здесь:

$(document).ready(function() { 

    $("div").css("border", "3px solid red"); 
    $(".storyblocks").mouseenter(function() { 
     $(this).animate({ 
      height: ($(this).height() + 20) + 'px', 
      width: ($(this).width() + 20) + 'px' 
     }); 
    }); 

    $(".storyblocks").mouseleave(function() { 
     $(this).animate({ 
      height: ($(this).height() - 20) + 'px', 
      width: ($(this).width() - 20) + 'px' 
     }); 
    }); 
});

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

Поскольку ваш jQuery ошибочен, он ничего не сделал, поэтому вы не видели красную рамку :), хотя красный код границы отделен от нарушающего кода.

НТН

источник

2013-11-08 04:36:09 Ming

Почему ваш jsfiddle не работает? Вы не добавили класс в div. –

О, я просто демонстрировал, как получить действительный код. Я обновил его, чтобы все работало. Cheers – Ming

Это позволит установить границу:

$("div").css("border", "3px solid red");

Чтобы проверить, если DIV имеют красную границу с 3px:

if($("div").css("border") == "3px solid red") { 
    console.log('border have red color') 
}

источник

2013-11-08 04:34:53

Попробуйте это:

+=20px не будет работать, вы должны найти высоту DIV и затем добавить/вычесть 20px.

$(document).ready(function(){ 
     $("div").css("border", "3px solid red"); 
     $(".storyblocks").mouseenter(function(){ 
      var h = $(this).height()+20; 
      var w = $(this).width()+20; 
      $(this).animate({ 
       height: h+"px",//add comma here 
       width: w+"px" 
      }); 
     }); 
     $(".storyblocks").mouseleave(function(){ 
      var h = $(this).height()-20; 
      var w = $(this).width()-20; 
      $(this).animate({ 
       height: h+"px",//add comma here 
       width: w+"px" 
      }); 
     }); 
    });

Fiddle here.

источник

2013-11-08 04:37:46 Hiral

Почему '+ = 20px' не будет работать? –

+ = 20px означает что? он должен иметь значение по умолчанию. не так ли? – Hiral

Как поместить jquery в отдельный файл?

ответ

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