Question

我有一个复选框列表，其中包含与属性值相同的值和表格数据以及用于比较它们的按钮。我所做的是在选中复选框（checkedArray）和另一个表数据属性数组（dataArray）时创建一个数组。然后检查checkedArray是否具有dataArray值。单击按钮，如果checkedArray具有dataArray值，则将类添加到表数据。在下面的代码中，它显示了数据，但在我再次取消选中该复选框并进行比较后才会删除。

我的代码示例是here。

var checkedArray = [];

$('.checkboxes input').on('change', function() {
  var checkedVal = $(this).val();

  if($(this).is(':checked')) {
    checkedArray.push(checkedVal);
  } else {
    checkedArray.splice($.inArray(checkedVal, checkedArray), 1);
  }
});

var tabledata = $('table td');

function displayData(arr) {  
  var tableArr = $('table td').map(function() {
    return $(this).attr('key');
  }).get();

  for (var i = 0; i < tableArr.length; i++) {
    for (var j = 0; j < arr.length; j++) {
      if (tableArr[i] === arr[j]) {
        $('table td[key="'+ arr[j] +'"]').addClass('show')
      } else {
        //$('table td:not[key="'+ arr[j] +'"]').addClass('hide')
      }
    } 
  }
}

$('#compare').on('click', function(e) {
  e.preventDefault();
  displayData(checkedArray);
});

Answer 1

看着小提琴，你不需要添加“隐藏”。在第一个css元素之后？＆＃39;隐藏＆＃39;只在JS中作为一个类调用，但在我看到的任何其他地方都没有引用。

即，

td {
  display: none;
}

应该是

td.hide {
  display: none;
}

Answer 2

在为已选中的类添加show class之前，您可以隐藏表中的所有td。为此，您可以在for循环之前添加$('table tr td').removeClass('show')，如下所示：

function displayData(arr) {  
  var tableArr = $('table td').map(function() {
    return $(this).attr('key');
  }).get();
  $('table tr td').removeClass('show');
  for (var i = 0; i < tableArr.length; i++) {
      for (var j = 0; j < arr.length; j++) {
          if (tableArr[i] === arr[j]) {
            $('table td[key="'+ arr[j] +'"]').addClass('show')
          } else {
            //$('table td:not[key="'+ arr[j] +'"]').addClass('hide')
          }
      }
  }
}

如果数组在按钮单击时与另一个数组没有匹配值，则隐藏数据

2 个答案: