События Javascript - как создать и сохранить переменную, к которой должен обращаться только один элемент?

Question

У меня есть небольшая проблема со сценарием, с которым я играю.Я пытаюсь нарисовать треугольники, которые, когда вы нажимаете на них, «переворачиваются» и меняют цвет, и при повторном нажатии они возвращаются в свое исходное состояние.Проблема в том, что я не уверен, где установить переменную isflipped.

У кого-нибудь есть идеи / кто-нибудь сталкивался с такой проблемой раньше?Вот что у меня на данный момент:

http://jsfiddle.net/hnqB6/17/

Спасибо!

Answer 1

Использовать данные

//read
$(yourElem).data("flipped")
//write
$(yourElem).data("flipped", true);

Answer 2

Вы можете сохранить значения на карте с индексом элементов в качестве ключа, например,

var flipmap = {}
flimmap[index] = false

//later in click
flipmap[index] = !flipmap[index]

другой альтернативой является использование API данных jquery для присоединения данных с элементами, например

первое значение при первом переключении инициализации на элемент

jQuery.data($("canvas")[i], 'flipped', false)//not-flipped

, чем при нажатии переключить его

var flipped = jQuery.data(elem,'flipped')//old value
flipped = !flipped;//toggle it
jQuery.data(elem,'flipped',flipped)//save it 

Я обновил пример с этим

http://jsfiddle.net/anuraguniyal/hnqB6/38/

Answer 3

Если вы сохраняете дизайн, в котором только один треугольник на холст, вы можете установить перевернутое состояние на самом элементе холста, используя метод data() в jQuery.Так что в вашем обработчике событий клика используйте $(e.currentTarget).data('isflipped', 1);, чтобы установить состояние, и var isflipped = $(e.currentTarget).data('isflipped'), чтобы получить состояние.

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

Answer 4

Вы также можете сделать это с помощью простого атрибута «перевернутый» на каждом холсте, но это то, что Дарек сказал в своем комментарии (используя вместо этого классы) http://jsfiddle.net/hnqB6/55

Answer 5

вы можете использовать данные, чтобы прикрепить переменную к самому элементу. Я обновил твою скрипку, посмотри.