前提・実現したいこと
少しわからないことがあり質問しました。
JavaScriptのclassListの仕様が知りたいです。
ボタンをクリックすると
like(1)実行前
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart-outline">
like(1)実行後
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like">
のように変化していました。
そこで、ion-iconはclassから指定できるのかなと思い、
<ons-icon class="ons-icon ons-icon--ion ion-ios-heart-outline">
としてみるも何も表示されませんでした。
なぜlike(1)でアイコンは変わるのでしょうか?
該当のソースコード
JavaScript
1function like (num) { 2 if (document.getElementByID("button-post-like-"+num).classList.contains("like")) { 3 document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart", "like"); 4 document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart-outline"); 5 } else { 6 document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart-outline"); 7 document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart","like"); 8 }; 9};
HTML
1<ons-button modifier="quiet" onclick="like(1)"> 2 <ons-icon id="button-post-like-1" icon="ion-ios-heart-outline"></ons-icon> 3</ons-button> 4 5<style type="text/css"> 6 .like { 7 color: red; 8 } 9</style>
回答3件
あなたの回答
tips
プレビュー