Может кто-нибудь объяснить этот код jQuery?

Возможный дубликат:
Может ли кто-нибудь объяснить этот код jQuery?

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

Код:

$(document).ready(function()
    {
            var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,
            bind:
                    [
                            {"mouseover":function(){rot[0].rotateAnimation(85);}},
                            {"mouseout":function(){rot[0].rotateAnimation(-35);}}
                    ]
            });
    });

Оно взято отсюда: http://wilq32.googlepages.com/wilq32.rollimage222, и там также есть демонстрация функциональности (анимация вращения изображения - третья демонстрация на странице).

Что мне нужно объяснить:

  1. Я понимаю, что объявляется переменная -"rot", но я не могу понять, где заканчивается объявление....

  2. Когда используется переменная, она используется как rot[0], что означает [0]? это массив?

  3. Я никогда не видел, чтобы bind использовался таким образом, оригинальный синтаксис

    $("селектор").bind(тип, [данные], fn );

Что происходит, тогда? Что означают запятые и [ ]?

  1. В конечном итоге я хотел бы использовать этот скрипт для поворота изображения «X», когда нажимается элемент «Y». Как это можно сделать (желательно без "привязки")?

Спасибо!


jquery image-rotation
person Adam Tal    schedule 15.12.2009    source источник
comment
Я настоятельно рекомендую вам просмотреть учебные пособия по jQuery и, возможно, несколько учебных пособий по основам JavaScript. Это очень простые вопросы, и они, кажется, указывают на то, что у вас может не быть большого опыта программирования.   -  person Peter Rowell    schedule 15.12.2009
comment
Для справки, исходный вопрос: stackoverflow.com /вопросы/1904136/   -  person Roatin Marth    schedule 15.12.2009
comment
@Peter - я настоятельно рекомендую вам ответить на его вопрос, если вы думаете, что это так элементарно, или оставить его в покое.   -  person Nathan Long    schedule 15.12.2009
comment
Спасибо @roatin, я как раз собирался опубликовать это :) @peter, некоторые указатели будут приветствоваться, я не смог найти никаких решений в документах jQuery, возможно, я что-то упустил.   -  person Adam Tal    schedule 15.12.2009
comment
Кстати, оба alert(rot) и alert(rot[0]) возвращают: * [object Object] *   -  person Adam Tal    schedule 15.12.2009
comment
Адам, вместо использования alert() для отладки, используйте консоль в Firebug (если вы используете Firefox) или Web Inspector/Инструменты разработчика (если вы используете Safari или Chrome) и console.log(rot) - это даст вам подробную информацию об объекте, который вы ему даете, в отличие от alert(), который даст вам только бесполезное строковое представление.   -  person Jordan Running    schedule 15.12.2009
comment
@AdamTal, лучше поздно, чем никогда, я объединил твой старый незарегистрированный аккаунт с этим.   -  person Tim Post♦    schedule 08.01.2013

Ответы (4)


arrow_upward
4
arrow_downward

Я думаю, что основные синтаксические проблемы были объяснены другими здесь довольно хорошо...

С точки зрения:

В конечном итоге я хотел бы использовать этот скрипт для поворота изображения «X», когда нажимается элемент «Y». Как это можно сделать (желательно без "привязки")?

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

var x=$("#imagex"); //<-- image to be rotated
var y=$("#elemy"); //<-- element to be clicked
var angleOfRotation=45; //<-- angle of rotation

y.bind("click",function(){
  x[0].rotateAnimation(angleOfRotation);
});
person ekhaled    schedule 15.12.2009

arrow_upward
2
arrow_downward

Декларация заканчивается предпоследней точкой с запятой. Ссылка фиксируется и будет использоваться гораздо позже, во время выполнения переданных функций обратного вызова.

rot — это объект jQuery, который не является массивом, но может быть проиндексирован как один.

rot[0] — это первый DOM-объект, соответствующий селектору #image3, то есть объект с идентификатором image3.

bind в данном случае — это не привязка функции, а часть параметров, переданных для вращения.

Квадратные скобки [foo, bar] обозначают буквальный массив foo и bar. Фигурные скобки { foo: "foo", bar: "bar"} — это литеральный объект со свойствами foo и bar.

person Craig Stuntz    schedule 15.12.2009
comment
Спасибо, это тоже помогает! - person Adam Tal; 15.12.2009

arrow_upward
1
arrow_downward

  1. Объявление заканчивается первой точкой с запятой. rot присваивается значение, которое возвращает rotate() (которое в данном случае совпадает с результатом $('#image3') из-за синтаксис цепочки методов). Все, что находится между rotate( и следующим ), является просто аргументами, передаваемыми в rotate().

  2. Да, [0] — это доступ к массиву. rot[0] относится к первому ("0-му") элементу в массиве rot.

  3. Здесь { maxAngle:25, minAngle:-55, bind: ... } — это «литерал объекта», то есть синтаксис для объекта, который имеет свойства maxAngle, minAngle и bind. Если вы присвоите этот объект переменной myObject (вместо того, чтобы просто передать его в качестве аргумента функции rotate()), вы сможете получить доступ к его свойствам, таким как myObject.maxAngle, myObject.minAngle и myObject.bind. В данном случае bind не является функцией, это просто имя свойства объекта.

person Jordan Running    schedule 15.12.2009
comment
Спасибо, это очень помогает! Так что теперь единственное, чего я не понимаю, это как отделить селектор от функциональности, т.е. навести элемент X, чтобы повернуть элемент Y... - person Adam Tal; 15.12.2009
comment
Похоже, что NWCoder ответил на ваш предыдущий вопрос. - person Jordan Running; 15.12.2009
comment
Не совсем, это не анимация... он использовал базовую функцию .rotate(), которая является своего рода данностью... - person Adam Tal; 15.12.2009

arrow_upward
0
arrow_downward

Хорошо, недостающая часть — вот как вы используете приведенный выше код для запуска поворота другим элементом:

var itemYouWannaRotate = $("#imageToRotate").rotate(0);
$("#TriggerElement").click(function(){
    itemYouWannaRotate[0].rotateAnimation(90);
});

Спасибо, ребята, все ваши ответы были большой помощью.

person Adam Tal    schedule 20.12.2009
comment
Это то, что я сказал в своем ответе - person ekhaled; 24.12.2009
comment
Эй, pǝlɐɥʞ, Извините, я пропустил ваш ответ. Спасибо, это именно то, что я искал, как видите. Адам - person Adam Tal; 24.12.2009