2022.05.18 - Tweet

riot.js(v3) 要素の表示・非表示の切り替えで手を抜く方法

Tag:

通常、要素の表示状態を切り替えるには、その要素ごとに
・状態を表すプロパティ
・クリックされたときのハンドラ関数
を定義しなければなりません。

例)3つのコンテンツで表示・非表示を切り替える

※tag.update()についてはイベントハンドラが自動でupdate()を行わないようにしている(riot.settings.autoUpdate = false;)ため、設定を変えていなければ不要。

もっと短く書く方法もあると思いますが、基本的な流れはこのようになるかと思います。

そこで一つユーティリティ関数を作成し、冗長な記載をしなくてすむようにする方法を紹介したいと思います。

myToggleという関数を使用することで、タグにプロパティや関数を定義しなくて良いのでスッキリと書くことができます。

 

コメントを残す