教えて頂きたいこと
Javascript書き始めの初心者です。
タッチアクションを作成したのですが、ものすごく長くなってしまいました。
もっと実践的にこれを短くできる書き方があれば教えていただきたく質問いたします。
該当のソースコード
Javascript
const touchaction1 = document.getElementById('touchaction1'),touchaction2 = document.getElementById('touchaction2'),touchaction3 = document.getElementById('touchaction3'),touchaction4 = document.getElementById('touchaction4')
,touchaction5 = document.getElementById('touchaction5'),touchaction6 = document.getElementById('touchaction6'),touchaction7 = document.getElementById('touchaction7');
//ボタン1タッチアクション
touchaction1.addEventListener('touchstart',function(){
touchaction1.classList.toggle('colorchangemove')
});
//ボタン1クリックアクション
touchaction1.addEventListener('click',function(){
touchaction1.classList.toggle('colorchange');
});
//ボタン2タッチアクション
touchaction2.addEventListener('touchstart',function(){
touchaction2.classList.toggle('colorchangemove');
});
//ボタン2クリックアクション
touchaction2.addEventListener('click',function(){
touchaction2.classList.toggle('colorchange');
});
//ボタン3タッチアクション
touchaction3.addEventListener('touchstart',function(){
touchaction3.classList.toggle('colorchangemove');
});
//ボタン3クリックアクション
touchaction3.addEventListener('click',function(){
touchaction3.classList.toggle('colorchange');
});
//ボタン4タッチアクション
touchaction4.addEventListener('touchstart',function(){
touchaction4.classList.toggle('colorchangemove');
});
//ボタン4クリックアクション
touchaction4.addEventListener('click',function(){
touchaction4.classList.toggle('colorchange');
});
//ボタン5タッチアクション
touchaction5.addEventListener('touchstart',function(){
touchaction5.classList.toggle('colorchangemove');
});
//ボタン5クリックアクション
touchaction5.addEventListener('click',function(){
touchaction5.classList.toggle('colorchange');
});
//ボタン6タッチアクション
touchaction6.addEventListener('touchstart',function(){
touchaction6.classList.toggle('colorchangemove');
});
//ボタン6クリックアクション
touchaction6.addEventListener('click',function(){
touchaction6.classList.toggle('colorchangemove');
});
//ボタン7タッチアクション
touchaction7.addEventListener('touchstart',function(){
touchaction7.classList.toggle('colorchangemove');
});
//ボタン7クリックアクション
touchaction7.addEventListener('click',function(){
touchaction7.classList.toggle('colorchangemove');
});
目的
●7つのナビゲーションボタンに対して、スマホ用のタッチアクションとPC用のクリックアクションを作成しました。
###試したこと
ググってみたのですが初心者向けの情報が少なく、わかりませんでした。
補足情報(FW/ツールのバージョンなど)
HTMLと CSSを記述しておきます。
【HTML】
</nav>
【CSS】
.colorchange{
background-image: none;
background-color: #FFEB3B;
border: 5px solid #ffd553;
border-radius: 100px;
}
.colorchangemove{
background-image: none;
background-color: #FFEB3B;
border: 5px solid #ffd553;
border-radius: 100px;
transform: rotate(360deg);
}
どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー