Ändern Sie die Hintergrundfarbe basierend auf dem aktualisierten Datensatz

Question

Ich baue eine Rails-Anwendung mit Upvoting- und Downvoting-Funktionalität. Ich möchte, dass die Farbe grün wird, wenn upvotes> 0 sind, und rot, wenn downvotes> 0 sind. Ich habe einen Helfer, der die Seite so darstellt, aber ich möchte, dass sie auf dem Benutzerbildschirm ohne Seitenaktualisierung aktualisiert wird.

index.html.erb

<div class="panel-left"> 
    <%= link_to 'Upvote', upvote_post_path(post), method: :patch, remote: true %> 
    <br /> 
    <%= link_to 'Downvote', downvote_post_path(post), method: :patch, remote: true %> 

    <h1 class="<%=number_of_votes(post.vote_count) %>"> 
    <div id="total-votes-<%= post.id %>"> 
     <%= post.vote_count %> 
    </div> 
    </h1> 
</div> 

upvote.js.erb:

// this updates the counter: it works 
$("#total-votes-<%= @post.id %>").html("<%= @post.vote_count %>") 

//this is what I am not sure of, I hacked it together but it breaks everything (prevents the above from updating) and shows a server error in the console 
if($('<%= escape_javascript @post.vote_count) %>') > 0) { 
    $("<%=escape_javascript number_of_votes(post.vote_count) %>").attr('style', 'background-color: rgb(179, 144, 114)'); 
} else { 
    $("<%= escape_javascript number_of_votes(post.vote_count) %>").attr('style', 'background-color: rgb(115, 227, 87)'); 
}; 

Beiträge Helfer

module PostsHelper 
    def number_of_votes(votes) 
    if votes > 0 
     'positive-bg' 
    elsif votes < 0 
     'negative-bg' 
    end 
    end 
end 

Wie gesagt alles funktioniert gut, außer ich den Hintergrund wollen Ändern Sie die Farben, wenn die Stimmen der Benutzer ausreichen, um @post.vote_count auf größer als oder kleiner als 0 zu ändern.

Answer 1

Sie müssen nur die class in h1 Tag zu ändern, so dass nur ein id, um es hinzuzufügen (in der gleichen Art und Weise Sie ein zu seinem Kind div hinzufügen) und aktualisieren, dass das Element class in der js.erb Datei.

index.html.erb

<div class="panel-left"> 
    <%= link_to 'Upvote', upvote_post_path(post), method: :patch, remote: true %> 
    <br /> 
    <%= link_to 'Downvote', downvote_post_path(post), method: :patch, remote: true %> 

    <h1 id="vote-<%= post.id %>" class="<%=number_of_votes(post.vote_count) %>"> 
    <div id="total-votes-<%= post.id %>"> 
     <%= post.vote_count %> 
    </div> 
    </h1> 
</div> 

Beachten Sie die Zugabe von id="vote-<%= post.id %>"; dass id wird das Element identifizieren und seine class ändern.

upvote.js.erb

$("#total-votes-<%= @post.id %>").html("<%= @post.vote_count %>") 
$("#vote-<%= @post.id %>").attr("class", "<%= number_of_votes(@post.vote_count) %>"); 

So finden Sie die id von h1-Tag verwenden, um seine class die gleiche Art und Weise Sie es an erster Stelle zuweisen zu aktualisieren (das heißt mit number_of_votes Helfer).