質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17479questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Onsen UI

    333questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

classListからの操作でなぜアイコンが変わるのか

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 265

Mori-Yukito

score 14

 前提・実現したいこと

少しわからないことがあり質問しました。
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)でアイコンは変わるのでしょうか?

 該当のソースコード

function like (num) {
 if (document.getElementByID("button-post-like-"+num).classList.contains("like")) {
  document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart", "like");
  document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart-outline");
 } else {
  document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart-outline");
  document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart","like");
 };
};
<ons-button modifier="quiet" onclick="like(1)">
 <ons-icon id="button-post-like-1" icon="ion-ios-heart-outline"></ons-icon>
</ons-button>

<style type="text/css">
 .like {
  color: red;
 }
</style>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mather

    2018/07/06 17:52

    like関数が文法エラーを起こすので、動いてるコードをコピーして貼り付けてください。

    キャンセル

回答 3

checkベストアンサー

0

 結論

classListの仕様ではなくWeb Componentsで実現しているからでした。(ソウイエバカイテアッタナー)

 Monacaのアーキテクチャー

先進的なアーキテクチャー

先進的なアーキテクチャー
Onsen UIの中身は3つのレイヤーで作られています。
CSSコンポーネント: 次世代のCSSであるcssnextで実装されています。
Web Components: JavaScriptで記述されており、どんなフレームワークともお使いいただけます。

Web Componentsについては以下くらいしか理解してません。(想像大いに入っている)

  1. 独自のタグをjavascriptでclassで作成可能
  2. 通常のタグと同じく、属性値を変えたら即反映(なんかうまいこと(^^;)してlistenしているんでしょうな。slim.jsなのかな?

 結論に至った経緯

属性変更を検知するのってMutationObserverくらいしか知らなくて、onsenui.jsを調べたけど見つからず…
下のコードで調べた時に5.icon指定無しならの動作がどうしてもしっくりこない。タグ名で検索したら何だこのソースは?→そうか、これがWeb Componentsか→あーicon属性なかったら動きそうにないなぁ ってところまで確認しました。
var icon = (略)'<ons-icon icon="' + this.getAttribute('icon') + '"></ons-icon>'); 

 <p>1.フォトシェアアプリのコード</p>
<p>アイコン指定に関してはiconのほうが優先</p>
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ion-ios-heart-outline ons-icon--ion"></ons-icon>
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like"></ons-icon>
 </div>
 <div>
 <p>2.iconだけにしたら?</p>
 <p>表示する</p> 
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class=""></ons-icon>
<ons-icon id="button-post-like-1" icon="ion-ios-heart" class=""></ons-icon>
 </div>
 <div>
 <p>3.classでstyleを追加 </p>
 <p>色は変わるけどアイコンは変わらない</p>
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like"></ons-icon>
<ons-icon id="button-post-like-1" icon="ion-ios-heart" class="ons-icon ion-ios-heart-outline ons-icon--ion"></ons-icon>
 </div>
 <div>
 <p>4 .classを手動で変更 </p>
 <p>色は変わるけどアイコンは変わらない</p>
 <ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ion-ios-heart-outline ons-icon--ion"></ons-icon>
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like"></ons-icon>
 </div>
 <p>5.icon指定無しなら</p>
<p>表示しない。。。なんで?</p>
<ons-icon id="button-post-like-1"  class="ons-icon ion-ios-heart-outline ons-icon--ion"></ons-icon>
<ons-icon id="button-post-like-1"  class="ons-icon ons-icon--ion ion-ios-heart like"></ons-icon>
 </div>
<!-- // onsenui.js  12280
//  _createClass(ActionSheetButtonElement, [{
//         var icon = _util2.default.createElement('<ons-icon icon="' + this.getAttribute('icon') + '"></ons-icon>'); 
-->

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/13 21:39

    ありがとうございました!

    キャンセル

0

https://ja.onsen.io/v1/reference/ons-icon.html

こちらを見る限り、質問の内容では省略されている icon="..." の部分が重要なようです。
質問をするときには自分の気になっている部分だけではなくそのまま記載してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/06 18:32

    申し訳ないです。
    icon="~"の中身ですが、htmlのコードとまったく同じものです。

    キャンセル

-1

document.getElementByID("button-post-like-"+num).classList("like")) {


ではなく

document.getElementByID("button-post-like-"+num).classList.contains("like")


ではないでしょうか?

element.classList


…ふと思ったんですが、monacaで作っているならchromeのデバッガーで追ってないのかな?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/07 00:28

    ご指摘の通りです。すみませんでした。
    デバッガーで追う(一応onclickの前後のons-iconの変化は見ました)と、前述の通りclassの中身が変化していて、でもそれが原因でiconが変わったとも言い切れず、分からないので質問しました。

    キャンセル

  • 2018/07/07 00:33

    like()以外で書き換わっているとか?ソース全体が無いのでよく分かりません。

    like()にブレークポイント置いてステップ実行で見ていけばすぐ解ると思いますよ。

    キャンセル

  • 2018/07/07 00:52 編集

    なるほど。
    試してみます。
    追記:
    このコード自体は、monacaの「フォトシェアアプリ デザインテンプレート」の一部です。すべて載せると大変なコード量になるので、お手数ですがすべてのコードについてはそちらを参考にして頂けると有り難いです。

    キャンセル

  • 2018/07/07 13:44

    ステップ実行とやら試してみましたがよく分かりませんでした(どこがどう置き換わったかは分かるのですが、なぜそこが置き換わってアイコンが変わるのかが分かりません)。
    仕方ないのでonsenuiのons-icon.jsを理解しようとしましたが、難しくてよく分かりませんでした。
    御多忙とは思いますが、oikashinoaさんの方でons-icon.jsをみていただけないでしょうか?無理を言ってすみません。
    ons-icon.jsのmonacaでのディレクトリは
    www/lib/onsenui/esm/elements/ons-icon.js です。
    どうかよろしくお願いします。

    キャンセル

  • 2018/07/07 17:11

    2018/07/07 00:57 に対して書いたことです

    …参考にしたものとかは書いてくださいね。(患者が電話で「お腹が痛いんで診察して下さい。でも体見せるの恥ずかしいから電話でおねがいします」って言われている医者ようなもんです)

    ion-iconってなんでしょ?「フォトシェアアプリ デザインテンプレート」でコード見たんですがどこにもみあたらず。
    ---
    そこで、ion-iconはclassから指定できるのかなと思い、
    <ons-icon class="ons-icon ons-icon--ion ion-ios-heart-outline">
    ---

    キャンセル

  • 2018/07/07 17:24

    すみません。"one-iconのicon"の誤りです。

    参考にした箇所は当該テンプレートの
    like関数: index.html 73~86行目
    ボタン及びアイコン: index.html 157行目
    です。
    お手数おかけしてすみません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17479questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Onsen UI

    333questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。