Jquery code for changing background-color on a specific text data

Question

I'm trying to implement a Jquery code in order to change background-color and data is a specific text = "Habilitados". I cant make it work. What's wrong with my code?

var item ;
$(document).on('knack-view-render.view_292', function (event, scene) {
    var data = Knack.models['view_292'].data.models;
    for (x = 0; x < data.length; x++) {
        item = data[x].attributes;

        if(item.field_1062=="Habilitados") {
            $("#"+item.id).css("background-color", "red");
        }
    }
});

What event are you trying to listen for with $(document).on? — Tom G, Jun 11 '18 at 15:34
Possible duplicate of [Jquery change background color](https://stackoverflow.com/questions/4283141/jquery-change-background-color) — manAbl, Jun 11 '18 at 16:29
@TomG I'd imagine that `knack-view-render` is an event, though I'm not familiar with Knack. — Tyler Roper, Jul 23 '18 at 04:14

score 0 · Answer 1 · answered Jul 23 '18 at 02:44

This should work for you (subject to break if Knack changes their markup)

// define your field values here
var colorMap = {
  "Habilitados": {
    "background_color": "red", 
    "color": "#fff"
  },
  // you can add additional values/colors here
};

// find a given field and map it's color based on values in the colorMap
function changeFieldColor(field, color_map){
  var child_field = $(field).find('.kn-detail-body');
  var value = child_field.text()

  if (color_map[value]) {
    $(child_field).css({'background-color' : color_map[value].background_color, 'color': color_map[value].color });
  }

}

// run this function on every page in your app
$(document).on('knack-scene-render.any', function() {
  changeFieldColor('.field_17', colorMapOne);
});

Jquery code for changing background-color on a specific text data

1 Answers1