javascript - 根据字段值更改页面加载时的按钮颜色

Question

我正在使用带有 X-editable 的数据表，并且表中有一些 Bootstrap 按钮。基本上，如果用户将可编辑的“状态”列更新为“已解决”，我希望前一行中的“未验证”按钮变为黄色。如果状态切换回任何其他状态，它应该变回红色。

我正在使用数据表分组功能添加“未验证”按钮，并且颜色更改正在工作，但是，如何检查页面加载时状态字段的值并设置正确的颜色？

我有一个 JSFiddle 设置:http://jsfiddle.net/n74zo0ms/19/

JQuery:

//initialize the datatable
$(document).ready(function() {
  var table = $('#dataTables').DataTable({
    "columnDefs": [{
      "visible": false,
      "targets": 0
    }],
    "info": false,
    "searching": false,
    "drawCallback": function(settings) {
      setupXedit();
      var api = this.api();
      var rows = api.rows({
        page: 'current'
      }).nodes();
      var last = null;

      api.column(0, {
        page: 'current'
      }).data().each(function(group, i) {
        if (last !== group) {

          $(rows).eq(i).before(
            '<tr class="group"><th colspan="2"></i><i class="fa fa-arrow-circle-o-right"></i>   Cluster: ' + group + '</th><th colspan="1"><a href="" data-toggle="modal" data-target="" class="btn-sm btn-danger btn-switch" style="display:block;width:99%;text-align:center;"><i class="fa fa-exclamation-triangle fa-switch"></i> Not Validated</a></th></tr>'
          );

          last = group;
        }
      });
    }

  });
});

function setupXedit() {
  //initialize the editable column
  $('.status').editable({
    url: '/post',
    pk: 1,
    source: [{
      value: 'New',
      text: 'New'
    }, {
      value: 'In Progress',
      text: 'In Progress'
    }, {
      value: 'Resolved',
      text: 'Resolved'
    }],
    title: 'Example Select',
    validate: function(value) {
      var cell = $(this).parent().parent().prev().find(".btn-switch");
      var cell2 = $(this).parent().parent().prev().find(".fa-switch");

      if (value == 'Resolved') {
        cell.removeClass('btn-danger');
        cell2.removeClass('fa-exclamation-triangle');
        cell.addClass('btn-warning');
        cell2.addClass('fa-thumbs-o-down');
      } else {
        cell.removeClass('btn-warning');
        cell2.removeClass('fa-thumbs-o-down');
        cell.addClass('btn-danger');
        cell2.addClass('fa-exclamation-triangle');
      };

    }
  });
}

Answer 1

将此代码放在其他函数之上，位于 $(document).ready(function() {

$(".status").each(function(){
    if($(this).text() === "Resolved"){
        ...do stuff....
        ..set color
        ..set text
    }
});