例えば、「aaaaa」「bbbbb」「ccccc」という文字列を想定し、この文字列を変数名として使ったり、この文字列をクラス名として持つ要素を取得したり、この文字列に特定の文字を追加した文字列をクラス名として特定の要素に追加したりしたいです。
コードを書いたら次のようになります。
html
1<p class="aaaaa">character a</p> 2<p class="bbbbb">character b</p> 3<p class="ccccc">character c</p>
javascript
1const aaaaa = document.querySelector('.aaaaa'); 2const bbbbb = document.querySelector('.bbbbb'); 3const ccccc = document.querySelector('.ccccc'); 4 5window.addEventListener('scroll', () => { 6 aaaaa.classList.add('aaaaa-animation'); 7 bbbbb.classList.add('bbbbb-animation'); 8 ccccc.classList.add('ccccc-animation'); 9});
JSでこのように書くと冗長になってしまうため、もっと短く書きたいです。そこで、イメージとしては下のようなコードですっきりと書きたいです。
javascript
1cont characer = ['aaaaa', 'bbbbb', 'ccccc']; 2 3for(let i = 0, i < character.length; i++) { 4 const character[i] = document.querySelector(`.${character[i]}`); 5} 6 7window.addEventListener('scroll', () => { 8 for(let i = 0, i < character.length; i++) { 9 character[i].classList.add(`${character[i]-animation}`); 10 } 11});
このコードではうまくいきませんが、このようなイメージですっきりしたコードを書きたいです。どのようにすればいいでしょう?
eval()
は使わない方向でお願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。