前提・実現したいこと
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
あなたの回答
tips
プレビュー