Question

我正在为一系列公寓建造一个过滤器。我已经弄清楚如何使用滑块进行过滤，现在还需要使用两个复选框按卧室数进行过滤。

<form name="filter" method="post" action="">
  <p>Bedrooms
    <input id="1bdrm" type="checkbox" value="1bdrm" />1 Bedroom
    <input id="2bdrm" type="checkbox" value="2bdrm" />2 Bedroom
  </p>
</form>

到目前为止，我有过滤器限制选择只显示一个卧室单位，但无法弄清楚如何重置并显示所有单位取消选中复选框。

// Set values for units
$('#cohen').data({
  id: 4,
  sqft: 976,
  bdrms: 2
});
$('#curnoe').data({
  id: 5,
  sqft: 572,
  bdrms: 2
});
$('#richler').data({
  id: 6,
  sqft: 624,
  bdrms: 2
});
$('#carr').data({
  id: 7,
  sqft: 544,
  bdrms: 1
});
$('#lawrence').data({
  id: 10,
  sqft: 467,
  bdrms: 1
});

//filter by number of bedrooms
$(document).ready(function() {
  var theValue;

  $("#1bdrm").click(function() {
    filterItems();
  });
});

function filterItems() {
  $.each($('.condo-box'), function() {
    $this = $(this);
    itemData = $this.data();
    if (itemData.bdrms == 1) {
      $this.show();
      itemData.matching = true;
    } else {
      $this.hide();
      itemData.matching = false;
    }
  });
}

这是一个小提琴链接.. https://jsfiddle.net/3y9vz1q1/我正在使用.data方法在每个单元上存储唯一属性，以便我可以过滤每个属性（例如：我为滑块限制了另一个脚本平方英尺的公寓。

希望社区能指出我正确的方向！提前致谢。

马克。

Answer 1

总是，当您点击复选框时，开始过滤功能，因为最后一项

$('#lawrence').data({
  id: 10,
  sqft: 467,
  bdrms: 1
});

有1，列表没有重置

试一试：

  $(document).ready(function() {
        var theValue;

        $("#1bdrm").click(function() {
          if(this.checked){
            filterItems(false);
              }else{
            filterItems(true);
            }
        });
      });

      function filterItems(reset)
      {
        $.each($('.condo-box'), function() {
          $this = $(this);
          itemData = $this.data();
          if(itemData.bdrms == 1 || reset === true){
            $this.show();
            itemData.matching = true;
          } else {
            $this.hide();
            itemData.matching = false;
          }
        });
      }

Answer 2

您将数据标记bdrms设置为1的元素标记为不可见。这不会改变。所以一旦它们不可见，它们就会一直保持这种状态。

有几种方法可以解决这个问题，其中一种方法是在未选中复选框时调用的单独功能：

if($(this).is(':checked')){
    filterItems();
} else {
    resetAll();
}

之后，编写一个将隐形元素重置为可见元素的函数是一件简单的事情：

function resetAll()
{
    $.each($('.condo-box'), function() {
        $this = $(this);
        if($this.is(":hidden")){
            $this.show();
        }
    });
}

所以更新你的小提琴将是：https://jsfiddle.net/3y9vz1q1/1/哪个工作正常。

<强>更新

更好的解决方案是使两个复选框都工作并使用单个函数：

$(document).ready(function() {
    $("#1bdrm, #2bdrm").click(function() {
    var bdrm1 = false;
    var bdrm2 = false;
    if($("#1bdrm").is(':checked')){
        bdrm1 = true;
    }
    if($("#2bdrm").is(':checked')){
        bdrm2 = true;
    }

    filterItems(bdrm1, bdrm2);
  });
});

function filterItems(bdrm1, bdrm2){
    $.each($('.condo-box'), function() {
    $this = $(this);
    itemData = $this.data();
    if(bdrm1 && !bdrm2){
      if(itemData.bdrms == 1){
        $this.show();
        itemData.matching = true;
      } else {
        $this.hide();
        itemData.matching = false;
      }
    }
    else if(bdrm2 && !bdrm1){
      if(itemData.bdrms == 2){
        $this.show();
        itemData.matching = true;
      } else {
        $this.hide();
        itemData.matching = false;
      }
    } else {
        $this.show();
        itemData.matching = true;
    }
  });
}

小提琴更新：https://jsfiddle.net/3y9vz1q1/2/

jQuery复选框过滤器，工作但想要在未选中时重置

2 个答案: