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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

914閲覧

【Rails】eachで取り出した要素に、それぞれjavascriptの処理をかけたい

tomomomo

総合スコア22

Ruby on Rails 5

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/10/12 13:47

現状と問題

railsを使ってツイッタークローンアプリを作成中です。
ツイート一覧をeach文を用いてグリッドレイアウトで表示しています。
参考画像です↓
Edit,Deleteの部分です
JavaScriptの処理で縦三点リーダをクリックしたときにEdit,Deleteのリンクが出るようにしています。
問題は、each文でとってきた要素の一つ目のDivにしかvisibility: hidden;が反映されていない点です。(1つ目のdiv以外は全て表示されてしまっていて、クリックも反応しない)

該当コード

HTML

1//each文の範囲 2<div class="project-boxes jsGridView "> 3 <% @posts.each do |post| %> 4 <div class="project-box-wrapper "> 5 <div class="project-box " style="background-color: #fee4cb; "> 6 <div class="project-box-header"> 7 <div class="project-box-header-introduction"> 8 <%= link_to attachment_image_tag(post.user, :profile_image, format: 'jpeg', size: "50x50", fallback: "no_image.jpg", size:'100x100'), user_path(post.user.id) %> 9 <%= link_to_if post.user, post.user.name, user_path(post.user.id) %> 10 </div> 11 <div class="more-wrapper"> 12 <button class="project-btn-more"> 13 <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round " class="feather feather-more-vertical "> 14 <circle cx="12 " cy="12 " r="1 " /> 15 <circle cx="12 " cy="5 " r="1 " /> 16 <circle cx="12 " cy="19 " r="1 " /> 17  </svg> 18  <!--縦三点リーダ--> 19  <div class="vertical-three-reader"> 20 <%= link_to("Edit", edit_post_path(post.id), {class: "list-group-item list-group-item-action"}) %> 21 <%= link_to("Delete", post_path(post.id), {method: :delete, class: "list-group-item list-group-item-action"}) %> 22  </div> 23  </button> 24 </div> 25 </div> 26 <div class="project-box-content-header"> 27 <!--<%= link_to(post_path(post)) do %>--> 28 <!-- <p class="box-content-header "><%=safe_join(post.body.split("\n"),tag(:br))%></p>--> 29 <!--<% end %>--> 30 </div> 31 <div class="box-progress-wrapper "> 32 <!--<p class="box-progress-header ">Progress</p>--> 33 <!--<div class="box-progress-bar ">--> 34 <!-- <span class="box-progress " style="width: 60%; background-color: #ff942e "></span>--> 35 <!--</div>--> 36 <!--<p class="box-progress-percentage ">60%</p>--> 37 <%= link_to(post_path(post), class:"no-underline") do %> 38 <p class="box-content-header "><%=safe_join(post.body.split("\n"),tag(:br))%></p> 39 <% end %> 40 </div> 41 <div class="project-box-footer "> 42 <div class="participants "> 43 # 44 </div> 45 <div class="days-left " style="color: #ff942e; "> 46 <%= l post.created_at, format: :default %> 47 </div> 48 </div> 49 </div> 50 </div> 51 <% end %> 52</div>

JavaScript

1document.addEventListener('DOMContentLoaded', function() { 2 3 document.querySelector(".project-btn-more").addEventListener('click', verticalThreeReader); 4 document.querySelector(".vertical-three-reader").style.visibility ="hidden"; 5 function verticalThreeReader(){ 6 const verticalThreeReader = document.querySelector(".vertical-three-reader"); 7 8 if(verticalThreeReader.style.visibility=="visible"){ 9 // hiddenで非表示 10 verticalThreeReader.style.visibility ="hidden"; 11 }else{ 12 // visibleで表示 13 verticalThreeReader.style.visibility ="visible"; 14 } 15} 16 17});

やってみたこと

divからリスト要素へ変更して実施しましたが結果は変わらずでした。
foreachについて読んでみたのですが、functionの引数に何を取るべきなのかわからなくなりました。
そもそもforEachで解決するのかもわかりませんが。。。

array.forEach(function(){   //ここに処理 });

以上、解決したいので何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

イメージ説明

投稿2021/10/12 18:33

編集2021/10/13 15:50
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問