jQuery.css（）が私のために働いていないのはなぜですか？

Question

私はいくつかのコードに苦しんでいて、これがうまくいくように思えます。謝罪します。もしこれが愚かな質問であれば、私はまだJavaScript/jQueryの新機能です。 Free Code Campコースの一環としてweatherアプリケーションを使用し、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の後に、つまりの後に動的にに作成されました。したがって、ここにevent delegationが必要です。したがって、documentにクリックを添付し、element - #dropを参照してください。

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

Updated PEN

よりシンプルにするために、#weather要素がDOM load中に存在するので、あなたは#weather要素に追加することができdocumentのinsted。以下の例を考えてみましょう。

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

また、私は適切なターンアラウンドになるには180degだったはずです。

Updated PEN 2 with 180deg and #weather