Почему переменная не принимает новые данные (jQuery)?

Question

[Михаил Р.]

Имеется код, который при выборе типа анимации, изменяет data-animation-out у элемента dropdown-container, здесь все работает, проблемы в другом.

Если после изменения типа анимации зайти в DOM, мы увидим, что содержимое data-animation-out действительно изменилось. Но при наведение мышки на dropdown-container мы видим лог со старом анимацией.

Получается, что переменная

var dropdown_container = $(this).find('>.dropdown-container');

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

Вопрос: в чем проблема и как заставить эту переменную обновлять свое содержимое?

Код на codepen.io

Answer 1

[0xD34F]

Заменить:

- change_element.attr('data-animation-in', $(this).val())
+ change_element.data('animation-in', $(this).val())

Ну или наоборот:

- dropdown_container.data('animation-in')
+ dropdown_container.attr('data-animation-in')

Дело в том, что данные, которые привязываются к элементу с помощью метода data, они не в атрибутах хранятся, обращение к атрибутам выполняется только один раз:

data-* attributes are used to initialize jQuery data. An element's data-* attributes are retrieved the first time the data() method is invoked upon it, and then are no longer accessed or mutated (all values are stored internally by jQuery)

Так что или всегда работайте через data, или всегда через attr.

Comments

[Михаил Р.]

Даже мыслей не было, что подобная проблема могла возникнуть из-за такой мелочи. Благодарю!