I have been attempting to modify the CSS of two child elements of a specific element using Backbone and jQuery. However, my code does not seem to be working as expected. I suspect that the issue lies in distinguishing between a DOM element and a jQuery object.
Below is a snippet of my code:
App.Views.ExploreCard.user = App.Views.ExploreCard.Parent.extend({
name: 'user',
allowUntyped: true,
classes: 'explore-person-box shadowed',
onclick: function() {
window.location.assign(this.data.profilePath);
},
postRender: function() {
App.HCS.redrawHCS(this.$el);
}
});
and
App.HCS = {
redrawHCS: function(elements) {
elements.each(function(index, value) {
console.log(value);
var hcs = $(value).find('.score');
var border = $(value).find('.user-card-avatar-round');
var score = $(hcs).html();
console.log(hcs);
console.log(border);
console.log(score);
if ( score <= 33 && score >= 1 ) {
$(hcs).css("background-image", "image-url('heart_primary.png')");
$(border).css("border", "3px solid #ff4013;");
}
else if ( score <= 66 && score >= 34 ) {
$(hcs).css("background-image", "image-url('body_primary.png')");
$(border).css("border", "3px solid #008cb4;");
}
else if ( score <= 99 && score >= 67 ) {
$(hcs).css("background-image", "image-url('minf_primary.png')");
$(border).css("border", "3px solid #fb9f00;");
}
});
}
};
This task of adjusting CSS rules shouldn't be too complex. What could I be overlooking in my implementation?