javascript - 查找上一行中的元素并更改类

Question

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

我正在使用数据表分组功能来添加“未验证”按钮。

我已经设置了一个 JSFiddle:http://jsfiddle.net/n74zo0ms/14/

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().find(".btn-switch")
      var cell2 = $(this).parent().parent().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

您需要将 prev() 方法链接到 cell 和 cell2 变量的赋值。

正确的分配应该如下所示:

var cell = $(this).parent().parent().prev().find(".btn-switch");
var cell2 = $(this).parent().parent().prev().find(".fa-switch");

Updated fiddle