вопрос по jQuery - HitForum

sleMO · 27.01.2013, 21:38

Собственно начну с задания. Хочу сделать блок "slider", который при нажатии на ссылку "link" будет раскрываться. jQuery только начал учить, так что полез в интернет и нашел ЭТО:

Код HTML:

<scipt src="http://local.com/inc/js-libs/jquery-1.8.3.js"></script>;
<scipt src="http://local.com/inc/js-libs/effects.slide.js"></script>;
<scipt src="http://local.com/inc/js-libs/effects.core.js"></script>;
<script type="text/javascript">
$("link").click(function () {
	$("slider").toggle("slide", {}, 1000);
});
</script>;

В примере на сайте все прекрасно работает, но вот на локальном сервере не хочет.
Кто укажет на ошибку или предложит более оптимальный вариант?

simplex · 27.01.2013, 22:08

sleMO, что такое link и slider? это id или class?
если Id, то вызывай $("#link"), если class - то $(".link")
$("tagname") используются для обращения к html-тегам, коими link и slider не являются.

sleMO · 27.01.2013, 23:38

simplex, не помогло. Вечно у меня какие то глупые проблемы возникают.

Решил ради интереса пока сделать "тяп-ляп", а позже вернуться к этому вопросу.
В итоге указал в таблице стиле для #slider display: none и попытался вот так изменить значение:

Код HTML:

$("#slider").css("display", "block");

Тоже не помогло.
Библиотека jQuery лежит в папке на локальном сервере. Правильность пути проверил в первую очередь.

simplex · 27.01.2013, 23:58

sleMO, тогда могу посоветовать попробовать заменить путь библиотек на относительный

Код:

<scipt src="./js-libs/jquery-1.8.3.js"></script>;

Только правильно указать папку где лежат библиотеки. Вышеуказанный путь будет верным, если html-файл лежит в inc.
Возможно они вообще не подключаются. И посмотреть, пишет ли браузер что-нибудь в консоль.

sleMO · 28.01.2013, 00:36

simplex, утром попробую относительный путь.
Консоль Dev Tools от Chrome пишет:

Цитата:

Uncaught ReferenceError: $ is not defined

Добавлено через 8 минут
Относительный путь не помог.

Madga · 28.01.2013, 08:52

jQuery(document).ready(function(){
$("#link").click(function () {
$("#slider").toggle("slide", {}, 1000);
});
});
#- селектор по id
. - по классу
Лучше писать jQuery вместо $

simplex · 28.01.2013, 10:04

Цитата:

Сообщение от sleMO

Uncaught ReferenceError: $ is not defined

Значит не подгружается библиотека jQuery
Сорри, у меня закралась ошибка, правильный относительный путь

Код:

<scipt src="js-libs/jquery-1.8.3.js"></script>

Это раз.
Во-вторых, неправильный синтаксис функции .toggle
Правильно так

Код:

.toggle( [duration ] [, complete ] )
.toggle( [duration ] [, easing ] [, complete ] )

Т.е. в твоем случае

Код:

$("#slider").toggle(1000);

где 1000 - продолжительность в мс. Ну и callback-функцию не используем.

Итого получаем (проверено, работает)

Код HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="js-libs/jquery-1.8.3.js"></script>
</head>

<body>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#link").click(function () {
				$("#slider").toggle("slow");
			});
		})
		
	</script>
	<div id="slider" style="width: 100px; height: 100px; border: 1px solid black">Slider</div>
	<a href="#" id="link">Toggle</a>
</body>
</html>

Madga · 28.01.2013, 12:05

Пути лучше сразу юзать абсолютные. А то за htaccessom может не заработать. Придётся править )

sleMO · 28.01.2013, 12:27

simplex,

Цитата:

Uncaught ReferenceError: $ is not defined local.com:4
(anonymous function) local.com:4
Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:236
chromeHidden.Port.dispatchOnDisconnect miscellaneous_bindings:236
Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:236
chromeHidden.Port.dispatchOnDisconnect miscellaneous_bindings:236
Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:236
chromeHidden.Port.dispatchOnDisconnect

Первая ошибка ссылается на

Цитата:

$(document).ready(function(){

остальные - на файл из Dev Tools
Сейчас попробую не Денвер, а XAMPP поставить.

simplex · 28.01.2013, 12:45

sleMO, если просто html-файл браузером, без сервера, открыть - работает?

Цитата:

Сообщение от Madga

Пути лучше сразу юзать абсолютные. А то за htaccessom может не заработать. Придётся править )

Тогда уж лучше сразу CDN прописать

Код:

<scipt src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

ибо на продакшене все равно реальные адреса перепрописывать надо будет.

Цитата:

Сообщение от sleMO

Сейчас попробую не Денвер, а XAMPP поставить.

Посмотрите OpenServer еще, мне понравился.

sleMO · 28.01.2013, 19:24

Цитата:

Сообщение от simplex

leMO, если просто html-файл браузером, без сервера, открыть - работает?

в html работает

Добавлено через 2 часа 25 минут

Цитата:

Сообщение от simplex

OpenServer

Эта жуть напрочь отказывается принимать относительные пути.

Добавлено через 39 минут

Цитата:

Сообщение от sleMO

$(document).ready(function(){

Ошибку исправил, но скрипт никак не хочет в php работать. Понимаю, что проблема в прокладке между стулом и клавиатурой, но как её исправить?)

auine · 28.01.2013, 20:13

читай документацию на офф сайте.
и почему тебе трудно поглядеть на ошибки в консоле? чего ты гадаешь?

Цитата:

никак не хочет в php работать.

код покажи

Цитата:

Лучше писать jQuery вместо $

одно и тоже.
я пишу всегда так

Код:

$().ready(function(){
});

sleMO · 28.01.2013, 20:47

auine, всё уже, решил проблему.

Цитата:

Сообщение от sleMO

проблема в прокладке между стулом и клавиатурой

Madga · 28.01.2013, 21:10

Цитата:

Сообщение от auine

одно и тоже.
я пишу всегда так

Код:

$().ready(function(){
});

Это пока кто-то какой нибудь prototype не подключит после jQuery и всё нагнётся.
Реально по трушному надо так
(function ($) {
Fill free to use $ as jQuery
})(jQuery)

auine · 28.01.2013, 21:14

и в какой же ситуации, ты подключишь prototype после jQuery?
что не все плагины находишь на jQuery?

и если на то пошло, то

Код:

jQuery.noConflict( [removeAll ] )