実現したいこと
for文を用いて全ての要素に同じ動作を指定したい。
###質問の詳細
現在javascriptを用いて、switchするボタンを作成しています。
全ての要素に同じ動作を指定するため、for文を用いて以下のループ処理を行いました。その結果、全ての要素に同じ動きを指定することはできたのですが、一つの要素を押すたびに残りの要素も同時に動いてしまうという問題が発生してしまいました。
別々のタイミングで同じ動作を指定するにはどのように実装したらよろしいでしょうか。
###困っていること
全ての要素が同時に作動してしまう。
該当のソースコード
HTMLコード:
<div class="button-box"> <div class="switcher"></div> <button type="button" class="toggle-btn" onclick="leftClick()">AT</button> <button type="button" class="toggle-btn" onclick="rightClick()">MT</button> </div>CSSコード:
.switch-btn {
display: flex;
align-items: center; }
@media (max-width: 480px) {
.switch-btn {
display: table;
font-size: 1rem; } }
.button-box {
width: 170px;
position: relative;
margin-left: 10px;
border: 2px solid #ccc;
border-radius: 15px;
background: #fff; }
.toggle-btn {
font-size: 0.8rem;
padding: 5px 30px;
background: transparent;
border: 0;
outline: none;
position: relative;
text-align: center;
color: #ccc; }
.switcher {
position: absolute;
width: 50%;
height: 100%;
background: #66A9CC;
border-radius: 13px;
transition: .5s; }
javascriptコード:
var switcher = document.getElementsByClassName('switcher')
function leftClick() {
for(var i=0;i<switcher.length;i++){
switcher[i].style.left=0
}
}
function rightClick() {
for(var i=0;i<switcher.length;i++){
switcher[i].style.left=85px
}
}

回答2件
あなたの回答
tips
プレビュー