for文を用いたループ処理

Question

実現したいこと

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
}
}

Comments

[int32_t]

コード全体を開示してください。とくに、leftClick() と rightClick() がどのように呼ばれるかが重要です。

[yambejp]

leftClick/rightClickはなにをトリガーとするのでしょうか？

[tima]

質問内容に不足があり申し訳ございません。
以下、全体のコードでございます。
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; }

Answer 1

質問文のコードから最小限の変更でやるなら、

• onclick="leftClick()" を onclick="leftClick(this)" に変更
• onclick="rightClick()" を onclick="rightClick(this)" に変更
• JavaScriptコードを以下に変更

function leftClick(button) {
  button.closest('.button-box').querySelector('.switcher').style.left = '0px';
}

function rightClick(button) {
  button.closest('.button-box').querySelector('.switcher').style.left= '85px';
}

onclick 属性などは古くて不自由な方法なので、早めに addEventListener() を使うように改めたほうがよいかと思います。

Comments

[tima]

ご回答ありがとうございます。
onclickが古い型であることを知らずに使用していました。
助言通り、addEventListenerを使用した実装を試してみようと思います。

Answer 2

例えばこんな感じ

<script>
document.addEventListener('click',({target})=>{
  if(target.matches('[data-lr]')){
    const switcher=target.closest('.button-box').querySelector('.switcher');
    switch(target.dataset.lr){
    case "left":
      switcher.style.left=0;
      break;
    case "right":
      switcher.style.left=85;
      break;
    }
  }
});
</script>
<div class="button-box">
     <div class="switcher"></div>
     <button type="button" class="toggle-btn" data-lr="left">AT</button>
     <button type="button" class="toggle-btn" data-lr="right">MT</button>
</div>
<div class="button-box">
     <div class="switcher"></div>
     <button type="button" class="toggle-btn" data-lr="left">AT</button>
     <button type="button" class="toggle-btn" data-lr="right">MT</button>
</div>
<div class="button-box">
     <div class="switcher"></div>
     <button type="button" class="toggle-btn" data-lr="left">AT</button>
     <button type="button" class="toggle-btn" data-lr="right">MT</button>
</div>

Comments

[tima]

実際にコードまで書いて頂きありがとうございます。
こちらのコードを参考に実装させて頂きます。