☆を塗りつぶしありに変更するということは、順当に考えると、
まず空いている部屋を探す。
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に変更。
【設計アイディアを機械的に作れるようになる方法を解説】