Question

我创建了一个“多重复选框”过滤器，其中有2个过滤器选项：“性别”和“州”

我想要实现的是：

过滤至少具有STATE类别之一的元素，但是一旦检查了GENDER，就隐藏该性别以外的元素

因此，例如，我通过站立和行走进行过滤（这显示了所有女性和男性的站立和行走），但是一旦我检查了MALE，就必须隐藏所有女性，因此它将显示所有男性站立和行走步行。

function run() {
    $(".item").hide();
    const checked = $(":checked");
    var gender = $("[name='gender']:checked").val();
    var state = $("[name='state']:checked").val();
    
    if (checked.length === 0) {
        return $(".item").show();
    }
    checked.each(function() {
        //$(".item." + this.id).show(); //Works, but it doesn't hide the non checked gender
        return $(this).hasClass(gender) || $(".item." + this.state);
    }).show();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div id="gender">
  <input type="radio" id="male" name="gender" onclick="run()" /> Male
  <input type="radio" id="female" name="gender" onclick="run()" /> Female
</div>
<div id="state">
  <input type="checkbox" id="walking" name="state" onclick="run()" /> Walking
  <input type="checkbox" id="standing" name="state" onclick="run()" /> Standing
</div>

<br/>
<div class="item male walking" >male walking</div>
<div class="item male standing walking">male standing and walking</div>
<div class="item standing female walking">female standing and walking</div>
<div class="item female walking">female walking</div>

Answer 1

逻辑已更新，可以使用单选按钮（而不是选择按钮）显示男性或女性。所有内联点击处理程序均已删除并更新为使用更改处理程序

var genderSelector = "";
var stateSelector = "";

var filter = function() {
  var selector = stateSelector + genderSelector;

  if (selector) {
    $(".item").hide();
    $(stateSelector + genderSelector).show();
    //console.log(stateSelector + genderSelector);
  } else {
    $(".item").show();
  }
};

$("#gender input").change(function() {
  genderSelector = this.value == "male" ? ".male:not(.female)" : ".female:not(.male)";
  filter();
});

$("#state input").change(function() {
  if ($(this).is(":checked")) {
    stateSelector = stateSelector + "." + this.id;
  } else {
    stateSelector = stateSelector.replace("." + this.id, "");
  }
  filter();
});


// this runs on load so the initial view will be pdated
genderSelector = $("#gender :checked").val() == "male" ? ".male:not(.female)" : ".female:not(.male)";
filter();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div id="gender">
  <input type="radio" id="male" value="male" name="gender" checked /> Male
  <input type="radio" id="female" value="female" name="gender" /> Female
</div>
<div id="state">
  <input type="checkbox" id="walking" name="state" /> Walking
  <input type="checkbox" id="standing" name="state" /> Standing
</div>

<br/>
<div class="item male walking">male walking</div>
<div class="item male standing walking">male standing and walking</div>
<div class="item standing female walking">female standing and walking</div>
<div class="item female walking">female walking</div>
<div class="item male female standing">male+female standing</div>

Answer 2

您可以这样操作：收集选中的项目，然后针对每个项目在DOM中查询其名称并显示它们。

请注意，这是相当低效的，因为您要为同一元素多次查询DOM。理想情况下，您应该保存元素集合，并在需要时调用show / hide隐藏它们。

此外，请注意，我添加了标签来改善输入元素的用户体验。现在，您可以单击标签本身来检查输入。

编辑：如果输入应该互斥，则单选按钮更合适。我已经更改了用户界面以使用单选按钮，并添加了一个框来重置按钮（不要按性别过滤）。我不知道男性和女性应该如何工作。目前，这两种性别均未包含。

function run() {
  $(".item").hide();
  let opposingGender = '';
  $(":checked").each(function() {
    let selector = '.' + this.value;
    if (this.name === 'gender') {
      opposingGender = ':not(.' + (this.value === 'male' ? 'female' : 'male') +')';
    }
    selector += opposingGender;
    $(selector).show();
  });
};

function unselect() {
  $('[name=gender]').prop('checked', false);
  run();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div id="gender">
  <input type="radio" id="male" value="male" name="gender" onclick="run()" /> <label for="male">Male</label>
  <input type="radio" id="female" value="female" name="gender" onclick="run()" /> <label for="female">Female</label>
  <button onclick="unselect()">Unselect</button>
</div>
<div id="state">
  <input type="checkbox" id="walking" value="walking" name="state" onclick="run()" /> <label for="walking">Walking</label>
  <input type="checkbox" id="standing" value="standing" name="state" onclick="run()" /> <label for="standing">Standing</label>
</div>

<br/>
<div class="item male walking" >male walking</div>
<div class="item male standing walking">male standing and walking</div>
<div class="item standing female walking">female standing and walking</div>
<div class="item female walking">female walking</div>
<div class="item male female standing">male+female standing</div>

使用复选框过滤多个类

2 个答案: