前提
HTML&CSSと、現在勉強しているJavaScriptやJQueryを使って、初期状態ではキーワード部分が透明で、その透明箇所をクリックすると文が表示されるような、「虫食い透明文」を作ろうと思っています。
文章のうち、虫食いにする部分は合計20個ほどを予定しており、そのいずれも、クリックしたら透明だった文が表示され、もう一度クリックすると消えるようにしたいと考えております。
試したこと
例えば、
<body> <p><span class="phantom1 erase">覚えたいこと1</span>、 また、<span class="phantom2 erase">覚えたいこと2</span>、 そして、<span class="phantom3 erase">覚えたいこと3</span>。</p> </body> <script> const phantom1 = document.querySelector('.phantom1'); phantom1.addEventListener('click',function (){ phantom1.classList.toggle('appear'); }); const phantom2 = document.querySelector('.phantom2'); phantom2.addEventListener('click',function (){ phantom2.classList.toggle('appear'); }); const phantom3 = document.querySelector('.phantom3'); phantom3.addEventListener('click',function (){ phantom3.classList.toggle('appear'); }); </script>phantom1~3のクラスをつけた要素には、それぞれopacity:0と設定した「erase」というクラスをつけて透明化しており、これをtoggleで、opacity:1の「appear」クラスをつけて表示させるようにしています。
実現したいこと
しかし、上記のようにconst phantom~ を20個分表記するのではなく、クラスをphantom1~3ではなく「phantom」と統一して、
「phantom」のクラスを持っている要素のうち、クリックされたものは「erase」のクラスを無効にして「appear」のクラスを発動させる。
という風に、scriptエリアに短く表記したいのですが、この場合、どのようにまとめればよいでしょうか。
ご回答、お願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/22 10:06