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

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

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

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

Q&A

解決済

2回答

276閲覧

複数オブジェクトにクラスを付与したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2020/11/04 09:13

下記コードの.btnをクリックしたときに、.btnと.aに.hiddenを付与したいです。
現状では複数オブジェクトの指定方法がわからず、 .aのみに.hiddenが付与される書き方をしてしまっています。
複数オブジェクトの指定方法をご教授いただけますと幸いです。
よろしくお願いいたします。

html

1<div class="a"></div> 2<div class="button">ボタン</div>

javascript

1const a = document.getElementsByClassName('a')[0]; 2const btn = document.getElementsByClassName('button')[0]; 3 4btn.addEventListener('click', event => { 5 a.classList.toggle('hidden'); 6});

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

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

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

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

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

yambejp

2020/11/04 09:21

複数オブジェクト の具体的な例をあげてください
think49

2020/11/04 23:18

> .btnと.aに.hiddenを付与したいです。 条件はそれだけですか。 「全ての.btnと.a」を対象とするなら、既存の回答で解決出来ます。
guest

回答2

0

ベストアンサー

複数オブジェクトは下のように div と button が複数あるものと推測しました。

ボタンの役割をするタグにdivは不適格だと思いましたのでbuttonに変えてます。

html

1<div class="a toggleTarget"></div> 2<div class="a toggleTarget"></div> 3<div class="a toggleTarget"></div> 4<button type="button" class="button toggleTarget">ボタン</button> 5<button type="button" class="button toggleTarget">ボタン</button>

下記コードの.btnをクリックしたときに、.btnと.aに.hiddenを付与したいです。
.aのみに.hiddenが付与される

ここはbuttonをクリックしたら class="a" と class="button" が含まれる要素全てに
class="hidden"を付与したいという意味だと推測しました。

それをまとめたものが下のコードです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>test</title> 8 <style> 9 div { 10 width: 100px; 11 height: 100px; 12 background-color: aqua; 13 float: left; 14 margin: 0 20px; 15 } 16 17 .button { 18 display: block; 19 margin-bottom: 10px; 20 } 21 22 .hidden { 23 display: none; 24 } 25 </style> 26</head> 27 28<body> 29 <div class="a toggleTarget"></div> 30 <div class="a toggleTarget"></div> 31 <div class="a toggleTarget"></div> 32 <button type="button" class="button toggleTarget">ボタン1</button> 33 <button type="button" class="button toggleTarget">ボタン2</button> 34 <button id="button3" type="button">ボタン3</button> 35 <script> 36 37 const btn = document.getElementsByClassName("button"); 38 const target = document.getElementsByClassName("toggleTarget"); 39 40 for (let b = 0; b < btn.length; b++) { 41 btn[b].addEventListener("click", () => { 42 for (let t = 0; t < target.length; t++) { 43 target[t].classList.add("hidden"); 44 } 45 }); 46 } 47 48 const btn3 = document.getElementById("button3"); 49 50 btn3.addEventListener("click", () => { 51 for (let t = 0; t < target.length; t++) { 52 target[t].classList.toggle("hidden"); 53 } 54 }); 55 56 </script> 57</body> 58 59</html>

投稿2020/11/04 13:30

Jon_do

総合スコア1373

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

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

0

javascript

1btn.addEventListener('click', event => { 2 a.classList.toggle('hidden'); 3 btn.classList.toggle('hidden'); 4});

か、

html

1<div class="a toggleTarget"></div> 2<div class="button toggleTarget">ボタン</div> 3 4<script> 5const a = document.getElementsByClassName('a')[0]; 6const btn = document.getElementsByClassName('button')[0]; 7const toggleTarget = document.getElementsByClassName('toggleTarget'); 8 9btn.addEventListener('click', event => { 10 [].forEach.call(toggleTarget, elm => { 11 elm.classList.toggle('hidden'); 12 }); 13}); 14</script>

ですね。
クラスは単一のものではなく、複数のものに、同じ仕様与えるのに適していると覚えましょう。

投稿2020/11/04 09:59

miyabi_takatsuk

総合スコア9555

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問