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

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

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

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

foreach

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

ArrayList

Java用のタグです。arrayListはListインターフェースを実装した、リサイズ可能な配列用クラスです。

Q&A

0回答

1008閲覧

JavaScriptで配列の要素を1つずつ表示・非表示をしたい。

moto12

総合スコア15

for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

foreach

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

ArrayList

Java用のタグです。arrayListはListインターフェースを実装した、リサイズ可能な配列用クラスです。

0グッド

0クリップ

投稿2020/12/31 00:36

前提・実現したいこと

JavaSciriptのsetAttributeとremoveAttributeを用いて、
ある要素をクリックすることで、他の要素を出現したり、消えたりさせたい。

(1−1をクリックすれば、1−1のメンバーのみが表示されるようにしたい。
現在、どこをクリックしても全てのクラスのメンバーが出現する。)

発生している問題・エラーメッセージ

イメージ説明

該当のソースコード

JavaScript

1 2 let c1 = document.querySelectorAll('.class-number'); 3 let members = document.querySelectorAll('.list1-1'); 4 c1 = Array.from(c1); 5 members = Array.from(members); 6 7 c1.forEach(function(list) { 8 list.addEventListener('click', function(){ 9 for(const member of members) { 10 if (member.getAttribute('style') == 'display:block;') { 11 member.removeAttribute('style','display:block;') 12 } else { 13 member.setAttribute('style','display:block;') 14 } 15 } 16 }) 17 }) 18

rails

1 2 3<div class="class-number">1-1</div> 4<div class="lists"> 5<% @users.each do |user|%> 6 <div class="list1-1 hidden"> 7 <% if user.grade == 1 && user.class_number == 1%> 8 <%=link_to new_user_diary_path(user) do %> 9 No.<%= user.student_number%> 10 <%= user.name%> 11 <% end %> 12 <% end %> 13 </div> 14 <% end %> 15</div> 16</div> 17 18<div class="class-number">1-2</div> 19<div class="lists"> 20<% @users.each do |user|%> 21 <div class="list1-1 hidden"> 22 <% if user.grade == 1 && user.class_number == 2%> 23 <%=link_to new_user_diary_path(user) do %> 24 No.<%= user.student_number%> 25 <%= user.name%> 26 <%end%> 27 <% end %> 28 </div> 29 <% end %> 30</div> 31</div> 32 33<div class="class-number">1-3</div> 34<div class="lists"> 35<% @users.each do |user|%> 36 <div class="list1-1 hidden"> 37 <% if user.grade == 1 && user.class_number == 3%> 38 <%=link_to new_user_diary_path(user) do %> 39 No.<%= user.student_number%> 40 <%= user.name%> 41 <%end%> 42 <% end %> 43 </div> 44</div> 45</div> 46 47</div> 48<% end %>

補足情報(FW/ツールのバージョンなど)

rails 6.0

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

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

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

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

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

m.ts10806

2020/12/31 00:39 編集

Rails前提だと現状を他者が確認できないので、回答得られにくいかと思います。 全て提示するか、Rails前提ではなくフロントサイドだけの話ということでブラウザに出力されたHTMLをご提示ください(erbではなくブラウザの「ソースを表示」で得られるHTMLです)
hoshi-takanori

2020/12/31 03:10

<div class="list1-1 hidden"> が 3 つ出てきますが、2 つ目以降の list1-1 の部分を list1-2, list1-3 と変えて区別できるようにする必要があるのでは。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問