Web制作

Firebaseチャットの作成4~ホテルの予約風アイコンの作成

navi
ホテルの予約をすると、空室状態の☆が、★に変わる、そうしたコードを作成します。

☆を塗りつぶしありに変更するということは、順当に考えると、

まず空いている部屋を探す。

const availableRoom=$(` #available-room-id-${messageId}`);

空いている部屋からアイコンを探す。

const vacantRoomIcon=availableRoom.find('.room__favorite-icon.fa-star-o');

console.log(vacantRoomIcon);

if(vacantRoomIcon.length>0){
vacantRoomIcon.removeClass('fa-star-o').addClass('far-star');
}

ただ、これでは☆をクリックしても黒色に変更しません。

また、fa-star-oクラスをもつ.room__favorite-iconが存在しない場合、indは該当要素を見つけられず、コンソールに表示されるlength:の値は0です。

 

この要素をクリックすると、黒く変わるというように、clickイベントを設定します。

 

$(document).on('click','.hotel-reservation-icon.fa-star-o',function( ){
const icon=$(this);
console.log(icon);

if(icon.length>0){
icon.removeClass('fa-star-o').addClass('fa-star');
}
});
});

で黒くなります。

要素が存在する場合、if(icon.length>0)に該当するため、黒く変更することができます。

 

その手順は、

動的に生成された.hotel-reservation-icon.fa-star-oに対して、クリックイベントを設定。

$(this)でクリックされた要素を取得。

要素が存在する場合、if(icon.length>0)に該当し、fa-star-oをfa-starに変更。

 

更に詳しい内容はこちらのサイトから。

 

【設計アイディアを機械的に作れるようになる方法を解説】

NOTE【設計の軌跡】最上階か露天風呂付のホテル

-Web制作

Copyright© サァーチpage , 2024 All Rights Reserved.