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

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

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

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

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1326閲覧

Railsでアイコンいいね機能を実装したが、アイコンを押すとなぜかアイコンが増える

TTTTaison

総合スコア6

Ruby

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

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2021/02/25 09:31

編集2021/02/25 09:36

エラーの概要

参考記事
上にある記事を参考にしてrailsで以下のようなアイコンを押すといいねできる機能を実装しました。アイコンにはfontawsomeを使用しています。
いいねの画面

しかし、アイコンを押すと、以下の画像のようにアイコンが増え、
増えたアイコン

さらにブラウザをリロードすると、3つに増えてしまいます。

イメージ説明

恐らくビューファイル 側でのエラーではあると思いますが、原因がわからなかったので質問させていただきます。

該当のソースコード

こちらはいいね機能の部分テンプレートです↓

Ruby

1<% if user_signed_in? %> 2 <% if current_user.liked_by?(@article.id) %> 3 <td> 4 <%= link_to destroy_like_path(@article), method: :DELETE, remote: true do %> 5 <i class="fa fa-heart unlike-btn"></i> 6 <% end %> 7 <%= @article.likes.count %> 8 </td> 9 <% else %> 10 <td> 11 <%= link_to create_like_path(@article), method: :POST, remote: true do %> 12 <i class="fa fa-heart like-btn"> 13 <% end %> 14 <%= @article.likes.count %> 15 </td> 16 <% end %> 17<% else %> 18 <p><span>いいね数: </span><%= @article.likes.count %></p> 19<% end %>

こちらは該当のビューファイルの全体像↓

Ruby

1<%= render "shared/header" %> 2<% if current_user.id == @article.user.id %> 3 <%= link_to "編集", edit_article_path(@article.id), method: :get, class: "article-red-btn" %> 4 <%= link_to "削除", article_path(@article.id), method: :delete, class:"article-destroy" %> 5<% end %> 6<%= @article.title %> 7<%= @article.content %> 8<%= @article.tag_list %> 9<div id="likes_buttons_<%= @article.id %>"> 10 <%= render partial: 'likes/like', locals: { article: @article} %> 11</div> 12 13<div> 14 <h4>コメント</h4> 15 <div id="comments_area"><!-- #① --> 16 <!-- 投稿されたコメント一覧をブログの詳細ページに表示するためのrender --> 17 <%= render partial: 'comments/index', locals: { comments: @comments } %> 18 </div> 19 <% if user_signed_in? %> 20 <!-- コメント入力欄をブログの詳細ページに表示するためのrender --> 21 <%= render partial: 'comments/form', locals: { comment: @comment, article: @article } %> 22 <% end %> 23 </div>

いいね機能を非同期で行うためのjQueryの記述(views/likes/create.js.erb)↓

javascript

1$('#likes_buttons_<%= @article.id %>').html("<%= j(render partial: 'likes/like', locals: {article: @article}) %>");

非同期でいいねを削除するためのjQueryの記述(views/likes/destroy.js.erb)↓

javascript

1$('#likes_buttons_<%= @article.id %>').html("<%= j(render partial: 'likes/like', locals: {article: @article}) %>");

いいね機能部分のCSSの記述(likes.scss)

Css

1.like-link { 2 text-decoration: none; 3} 4 5.like-link:hover { 6 background-color: #fff; 7} 8 9.like-btn { 10 font-size: 15px; 11 color: #808080; 12} 13 14.unlike-btn { 15 font-size: 15px; 16 color: #e54747; 17} 18

最後に

何か他に追加して欲しい情報がありましたら、お申し付けください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

<i>タグ閉じてないからでは。

[HTML5] 閉じタグ省略可能になってた
からするとiは省略可能ではないようです。

投稿2021/02/25 09:36

m.ts10806

総合スコア80765

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

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

TTTTaison

2021/02/25 09:40

ありがとうございます!!解決できました
m.ts10806

2021/02/25 09:45

HTMLのチェック機能があるエディタ使った方がいいかもしれません。(もしくはそういうプラグインの提供されているもの)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問