【jQuery】クリックする毎に要素を変更する方法

本日はクリックする毎に表示する要素を変更する方法について

書きたいと思います！

■やりたいこと

・アイコン（≡）をクリックするとWEBページの情報が一覧で表示される

・クリックしたと同時にアイコンの表示を変える（「≡」から「×」に変更する）

・再度「×」をクリックするとアイコンが「×」から「≡」に変わり

　元のトップページを表示する。

※アイコンはFontAwesomeを使用してます。

■苦労したこと

・クリックでアイコンの切替を切り替え且つ表示するページも切り替えること

■実装方法

<script>

$('.menu').click(function(){

#.menuはFont Awesomeに記載されてる「≡」のアイコンコードです。

if ($('.menu').hasClass('fal fa-times delete')){

#fal fa-times deleteは「×」のアイコンコードです。

#hasClassでもし「×」が表示されてる時の処理を記載します。

$('.menu').removeClass('fal fa-times delete');

#removeClassで「×」アイコンを消します。

$('.delete').addClass('fa fa-bars menu');

#クリックするとaddClassで「≡」アイコンを表示します。

$('.display-list').fadeOut();

$('.list').css('display','none');

#fadeOutとcssで一覧ページを消します。

}else{

$('.display-list').fadeIn();

$('.list').css('display','block');

一覧ページを表示するコードです。

$('.menu').addClass('fal fa-times delete');

#クリックすると「×」アイコンを表示するコードです。

}

});

</script>

■最後に

だいぶゴリ押しで実装したので無駄が多いと思います。。

もっと楽な方法があれば教えていただけると幸いです！！