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

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

您可以在为选中的列表添加显示类之前隐藏表中的所有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')
          }
      }
  }
}