Question

我正在尝试使用复选框显示/隐藏元素，以通过客户端ID对其进行过滤。

我将检查后的值放入一个数组中，然后遍历每个元素以验证它们的“数据客户端”值是否在过滤器数组中，但是即使console.log表明它会返回true。

我制作了一个Codepen来进行一些测试：https://codepen.io/anon/pen/RvQvRj?editors=1111#anon-login

希望你能帮助我。

<div data-client="15"><h3>Pizza Client</h3></div>

<label class="filter-list__item" for="pizza">
  <span>Pizza</span>
  <input type="checkbox" name="filter[]" value="15" id="pizza">
</label>

let activeFilters = [];

$('input:checkbox').change(function() {
  $checkbox = $(this);
  if($checkbox.is(':checked')) {
    activeFilters.push($checkbox.val());
  } else {
    var index = activeFilters.indexOf($checkbox.val());
    if (index > -1) {
      activeFilters.splice(index, 1);
    }
  }

  updateProjects(activeFilters);
});

const projects = $('div[data-client]');
let updateProjects = function(activeFilters) {
  if(activeFilters.length == 0) {
    $.each(projects, function(i, e) {
      $(this).fadeIn("fast");
    });
    return;
  }

  $.each(projects, function(i, e) {
    let $actualProject = $(this);
    console.log( activeFilters.includes($actualProject.data('client')) );
    console.log($actualProject.data('client') + ' , filters: ' + activeFilters);

    if( activeFilters.includes($actualProject.data('client')) ) {
      $actualProject.fadeIn("fast");
    } else {
      $actualProject.fadeOut("fast");
    }
  });
  return;
}

Answer 1

您要将.val()（一个 string ）的返回值推入activeFilters()。

如果.data()也返回一个字符串，那不是问题，但是...

jQuerys .data()方法尝试一切将data-*属性的字符串值转换为 JavaScript值（包括布尔值，数字，对象，数组和null）。字符串仅在不改变其表示形式的情况下才转换为数字（例如，字符串“ 100”转换为数字100，但是将“ 1E02”和“ 100.000”保留为字符串，因为它们的数值为100序列化为“ 100”）（Source）。

将过滤器复选框的值转换为数字

$('input:checkbox').change(function() {
  var $checkbox = $(this),
      value = parseInt($checkbox.val(), 10);

  if($checkbox.is(':checked')) {
    activeFilters.push(value);
  } else {
    var index = activeFilters.indexOf(value);
    if (index > -1) {
      activeFilters.splice(index, 1);
    }
  }

  updateProjects(activeFilters);
});

或将.data('client')调用的返回值转换为字符串，然后再将其传递给.includes()

$.each(projects, function(i, e) {
  let $actualProject = $(this);

  if( activeFilters.includes($actualProject.data('client').toString()) ) {
    $actualProject.fadeIn("fast");
  } else {
    $actualProject.fadeOut("fast");
  }
});

或使用.attr('data-client')

$.each(projects, function(i, e) {
  let $actualProject = $(this);

  if( activeFilters.includes($actualProject.attr('data-client')) ) {
    $actualProject.fadeIn("fast");
  } else {
    $actualProject.fadeOut("fast");
  }
});

示例

let activeFilters = [];

$('input:checkbox').change(function() {
  var $checkbox = $(this),
      value = parseInt($checkbox.val());
      
  if($checkbox.is(':checked')) {
    activeFilters.push(value);
  } else {
    var index = activeFilters.indexOf(value);
    if (index > -1) {
      activeFilters.splice(index, 1);
    }
  }

  updateProjects(activeFilters);
});

const projects = $('div[data-client]');
let updateProjects = function(activeFilters) {
  if(activeFilters.length == 0) {
    $.each(projects, function(i, e) {
      $(this).fadeIn("fast");
    });
    return;
  }

  $.each(projects, function(i, e) {
    let $actualProject = $(this);

    if( activeFilters.includes($actualProject.data('client')) ) {
      $actualProject.fadeIn("fast");
    } else {
      $actualProject.fadeOut("fast");
    }
  });
  return;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="filter-list__item" for="pizza">
  <span>Pizza</span>
  <input type="checkbox" name="filter[]" value="15" id="pizza">
</label>

<div data-client="15" data-name="Pizza"><h3>Pizza Client</h3></div>
<div data-client="14" data-name="Pizza"><h3>Pasta Client</h3></div>

包含函数返回显然错误的false

1 个答案: