Почему jQuery.css() не работает для меня?

Question

Я борюсь с каким-то кодом и, похоже, нахожу его на работу - извиняюсь, если это глупый вопрос, я до сих пор совершенно новичок в JavaScript/jQuery и т. Д.

Я пытаюсь создать Weather App как часть курса Free Code Camp и построили с помощью simpleWeather.js. Теперь я пытаюсь оживить немного страницы, чтобы сделать ее более интерактивной. У меня есть некоторый код:

$('#drop').on('click', function() { 
    $('.fa-chevron-circle-down').css('transform', 'rotate(180deg)'); 
}); 

Я считаю, это должно на щелчок, повернуть значок на 180 градусов, но независимо от того, какие изменения я стараюсь, я не могу заставить его работать. Проведя вчера несколько часов, я решил, что пришло время обратиться за помощью! (Идея состоит в том, что как только она будет работать, я буду анимировать элементы ниже, чтобы они отображались только при нажатии кнопки).

Мой codepen является https://codepen.io/woftis/pen/VjppYM

Заранее спасибо за любую помощь, кто может дать.

Answer 1

Ваш #drop элемент был создан после DOM load i.e. динамически. Следовательно, вам нужно event delegation здесь. Поэтому приложите свой клик к document, а затем отправьте element - #drop.

$(document).on('click','#drop', function() { 
    $('.fa-chevron-circle-down').css('transform', 'rotate(225deg)'); 
}); 

Updated PEN

Чтобы быть более простым, так как #weather элемент существовал во DOM load, InstEd из document вы можете добавить его в #weather элемент. Рассмотрим ниже пример.

$('#weather').on('click','#drop', function() { 
    $('.fa-chevron-circle-down').css('transform', 'rotate(225deg)'); 
}); 

, а также я думаю, он должен был 180deg быть надлежащим оборачиваемости.

Updated PEN 2 with 180deg and #weather