Verwenden von javascript_tag zum Ändern der Seitenhintergrundfarbe in Schienen

Ich erstelle eine Anwendung, um Spielercharaktere zu verfolgen. Ich dachte, es wäre cool, wenn sich der Hintergrund der Charakterseite je nach dem aktuellen Prozentsatz seiner maximalen Gesundheit ändert. Ich versuche, das Tag 'javascript_tag' zu verwenden, um es dynamisch zu ändern.Verwenden von javascript_tag zum Ändern der Seitenhintergrundfarbe in Schienen

Hier ist der Code-Schnipsel aus der show_html_erb Datei ist:

<% javascript_tag do %> 
    var perc = @character.getPercentHealth.to_json %>"; 
    if (perc > .5) { 
     document.body.style.backgroundColor = "green"; 
    }else if(perc > .25) { 
     document.body.style.backgroundColor = "yellow"; 
    }else if(perc > 0){ 
     document.body.style.backgroundColor = "red"; 
    }else{ 
     document.body.style.backgroundColor = "grey"; 
    } 
<% end %>

Weitere Referenz, hier ist die getPercentHealth Methode aus meiner character.rb Datei:

def getPercentHealth 
    perc = 0.00 
    perc = hitpoints/maxHP 
    return perc 
end 

It runs smoothly, but does not change the background color. Any suggestions?

Quelle

2016-11-13 Wil Hoskins

Sie brauchen nicht zu Verwenden Sie JavaScript für das, wenn Sie möchten? Sie können nur tun:

<% if @character.getPercentHeath > 5 %> 
<body style="background-color: red;"> 
<% end %>

Quelle

2016-11-13 19:02:44 Crashtor

Thank you! Das ist viel sauberer. Ich bin immer noch neu bei Ruby/Rails, also vergib mir meinen Mangel an Wissen. –

Das ist in Ordnung. Ich war auch dort und bin es immer noch bis zu einem gewissen Grad. Bitte! – Crashtor

Die obige Lösung ist schön, dass es nur CSS verwendet. Idealerweise wird css jedoch von HTML getrennt und so weit wie möglich von den View-Dateien abstrahiert. Um dies sauberer zu machen, würde ich geneigt sein, eine Hilfsmethode zu erstellen, die die prozentuale Zustandsvariable übergibt und einen Klassennamen, z.

helper_file.rb

def health(percentage) 
    case percentage 
    when > 0.5 
     "goodHealth" 
    when > 0.25 
     "mediocreHealth" 
    when > 0 
     "poorHealth" 
    else 
     "" 
    end 
end

view.erb

<body class="<%=health(percentage) %>">

styles.css

.illHealth {background-color: red;} 
.mediocreHealth {background-color: yellow;} 
.goodHealth {background-color: green;} 
.noHealth {background-color: grey;}

Quelle

2016-11-14 11:08:43 margo

Verwenden von javascript_tag zum Ändern der Seitenhintergrundfarbe in Schienen

Antwort

Verwandte Themen