Кто-нибудь может, пожалуйста, объяснить этот код jQuery?[дубликат]

StackOverflow https://stackoverflow.com/questions/1909630

  •  19-09-2019
  •  | 
  •  

Вопрос

Возможный Дубликат:
Кто-нибудь может объяснить этот код 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, и там также есть демонстрация функциональности (анимация поворота изображения - 3-я демонстрация на странице).

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

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

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

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

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

Тогда что же происходит?Что означают все эти запятые и [ ] о чем?

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

Спасибо!

Это было полезно?

Решение

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

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

Что я хотел бы сделать, в конце концов, так это использовать этот скрипт для поворота изображения "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);
});

Другие советы

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

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

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

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

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

  1. Объявление заканчивается первой точкой с запятой. rot присваивается значение, которое rotate() возвращает (что, в данном случае, совпадает с результатом $('#image3'), из-за jQuery синтаксис цепочки методов).Все, что находится между 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 это не функция, это просто имя свойства объекта.

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

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

Спасибо, ребята, все ваши ответы мне очень помогли.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top