質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

392閲覧

for文を用いたループ処理

tima

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/05/24 08:57

編集2023/05/24 09:40

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2023/05/24 09:04

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

2023/05/24 09:22

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

2023/05/24 09:23

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

回答2

0

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

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

js

1function leftClick(button) { 2 button.closest('.button-box').querySelector('.switcher').style.left = '0px'; 3} 4 5function rightClick(button) { 6 button.closest('.button-box').querySelector('.switcher').style.left= '85px'; 7}

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

投稿2023/05/24 12:13

int32_t

総合スコア21267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tima

2023/05/24 13:57

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

0

ベストアンサー

例えばこんな感じ

javascript

1<script> 2document.addEventListener('click',({target})=>{ 3 if(target.matches('[data-lr]')){ 4 const switcher=target.closest('.button-box').querySelector('.switcher'); 5 switch(target.dataset.lr){ 6 case "left": 7 switcher.style.left=0; 8 break; 9 case "right": 10 switcher.style.left=85; 11 break; 12 } 13 } 14}); 15</script> 16<div class="button-box"> 17 <div class="switcher"></div> 18 <button type="button" class="toggle-btn" data-lr="left">AT</button> 19 <button type="button" class="toggle-btn" data-lr="right">MT</button> 20</div> 21<div class="button-box"> 22 <div class="switcher"></div> 23 <button type="button" class="toggle-btn" data-lr="left">AT</button> 24 <button type="button" class="toggle-btn" data-lr="right">MT</button> 25</div> 26<div class="button-box"> 27 <div class="switcher"></div> 28 <button type="button" class="toggle-btn" data-lr="left">AT</button> 29 <button type="button" class="toggle-btn" data-lr="right">MT</button> 30</div> 31

投稿2023/05/24 10:12

yambejp

総合スコア115495

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tima

2023/05/24 14:04

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問