いいね機能を自作のwebアプリケージョン内で作成しています。現在の状況としては、いいねを押した時にaddClassとremoveClassを使い、灰色のハートを押した時には赤のハートになり、その逆の動作もしてくれています。また、ajaxの非同期通信を行い、いいねを押すとテーブルに保存、削除できるようになっています。次の課題としては、いいねを押した時に現在のいいね数からプラス、マイナス1できて、合計いいね数が表示されるようにしたいです。コードは下記に表示しておきます。具体的には下記のコードのheart_count.text()の中をどのように記述すればいいのかわかりません。よろしくお願いします。
#いいね機能のビュー <% if user_signed_in? %> <% if post.like_user(current_user.id) %> <div class="like-button"> <%= image_tag("icon_red_heart.svg", :id => post.id) %> <span class="like-sum"> <%= post.likes_count %> </span> </div> <% else %> <div class="like-button"> <%= image_tag("icon_heart.svg", :id => post.id) %> <span class="like-sum"> <%= post.likes_count %> </span> </div> <% end %> <% else %> <%= image_tag("icon_heart.svg") %> <span> <%= post.likes_count %> </span> <% end %>
#ajaxによる非同期通信 <script> $(".like-button").on("click", function(){ var heart = $(this).children('img'); var heart_count = $(this).children('.like-sum'); var post_id = $(this).children('img').attr('id'); like_function($(this), heart, heart_count, post_id) }); function like_function(button, heart, heart_count, post_id){ if (button.hasClass("decrement")){ $.ajax({ url: "/posts/" + post_id + "/unlike", type: "delete", data: {post_id: post_id} }) .done(function(data){ button.removeClass("decrement").addClass("increament") heart.attr("src", "/assets/icon_heart.svg") heart_count.text(ここをどう書けばいいのか知りたい) }); return false; }else{ $.ajax({ url: "/posts/" + post_id + "/like", type: "post", data: {post_id: post_id} }) .done(function(data){ button.removeClass("increment").addClass("decrement") heart.attr("src", "/assets/icon_red_heart.svg") heart_count.text(ここをどう書けばいいのか知りたい) }); return false; } } </script>
#likes_controller class LikesController < ApplicationController before_action :set_post def create Like.create(user_id: current_user.id, post_id: params[:id]) @likes = Like.where(user_id: current_user.id) @post = Post.find(params[:id]) @index = params[:index] @posts = Post.all end def destroy @like = Like.find_by(user_id: current_user.id, post_id: params[:id]) @like.destroy @likes = Like.where(user_id: current_user) @index = params[:index] @posts = Post.all end private def set_post @post = Post.find(params[:id]) end end
#post.rb class Post < ActiveRecord::Base belongs_to :user has_many :comments has_many :likes, dependent: :destroy def like_user(user_id) likes.find_by(user_id: user_id) end end
例えば、具体的にajax成功時に返ってくるdataの中身は最近知った曲! 聴いてみて!
$('#0').html(" <div class="like-button">\n <img id="14" src="/assets/icon_red_heart-c2c7d9952444a9a715454f258e4e0d3b.svg" alt="Icon red heart" />\n <span class="like-sum">\n 1\n </span>\n </div>\n");
なのですが、この中のspanで囲まれた1を表示させたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。