过滤时隐藏父div

Question

我有一个带有过滤器的时间线，允许用户显示/隐藏事件。 如果过滤器中没有匹配项，CSS 的格式要求隐藏整个父级（“.timeline”），否则有一个边框仍然可见：

JSFiddle查看示例

<form>
  <p>Topics</p>
  <input type="checkbox" name="topic" value="topic1" id="topic1"><label for="topic1">Topic 1</label>
  <input type="checkbox" name="topic" value="topic2" id="topic2"><label for="topic2">Topic 2</label>
  <input type="checkbox" name="topic" value="topic3" id="topic3"><label for="topic3">Topic 3</label>
</form>

<form>
<p>
Format
</p>
  <input type="checkbox" name="format" value="format1" id="format1"><label for="format1">Format 1</label>
  <input type="checkbox" name="format" value="format2" id="format2"><label for="format2">Format 2</label>
</form>

<br>

<div class="timeline">
    <div class="event" data-id="event1"
        data-category="topic1 format1">
        Date &amp; Time<br>
        Content
    </div>
    <div class="event" data-id="event2"
        data-category="topic2 format2">
        Date &amp; Time<br>
        Content
    </div>
</div>

    var $filterCheckboxes = $('input[type="checkbox"]');
    $filterCheckboxes.on('change', function () {
        var selectedFilters = {};
        $filterCheckboxes.filter(':checked').each(function () {
            if (!selectedFilters.hasOwnProperty(this.name)) {
                selectedFilters[this.name] = [];
            }
            selectedFilters[this.name].push(this.value);
        });
        var $filteredResults = $('.event');
        $.each(selectedFilters, function (name, filterValues) {
            $filteredResults = $filteredResults.filter(function () {
                var matched = false,
                    currentFilterValues = $(this).data('category').split(' ');
                $.each(currentFilterValues, function (_, currentFilterValue) {
                    if ($.inArray(currentFilterValue, filterValues) != -1) {
                        matched = true;
                        return false;
                    }
                });
                return matched;
            });
        });
        $('.event').hide().filter($filteredResults).show();
    });

我尝试包括$('.timeline').hide().filter($filteredResults).show(); 到最后一行，它首先起作用，但是当您取消选中框时，不会再出现任何元素。

我应该使用某种 if/then 语句吗？ 比如， if matched = false { document.getElementsByClassName("timeline").style.display = "none"; }; if matched = false { document.getElementsByClassName("timeline").style.display = "none"; };

Answer 1

这是您需要的 Javascript

 var $filterCheckboxes = $('input[type="checkbox"]'); $filterCheckboxes.on('change', function () { $('.timeline').show(); var selectedFilters = {}; $filterCheckboxes.filter(':checked').each(function () { if (!selectedFilters.hasOwnProperty(this.name)) { selectedFilters[this.name] = []; } selectedFilters[this.name].push(this.value); }); var $filteredResults = $('.event'); $.each(selectedFilters, function (name, filterValues) { $filteredResults = $filteredResults.filter(function () { var matched = false, currentFilterValues = $(this).data('category').split(' '); $.each(currentFilterValues, function (_, currentFilterValue) { if ($.inArray(currentFilterValue, filterValues) != -1) { matched = true; return false; } }); return matched; }); }); $('.event').hide().filter($filteredResults).show(); var all_hidden = true; $('.event').each(function (index) { if ($(this).is(":visible")) { all_hidden = false; } }); if (all_hidden) { $('.timeline').hide(); } });

我在最后添加了一个 if 语句来检查所有事件是否被隐藏，方法是遍历所有事件并使用if ($(this).is(":visible"))检查它们的可见性。 如果它们全部隐藏，它就会隐藏时间线，否则时间线保持原样。

在您的函数开始时，我添加了一行以确保在开始可见性循环之前时间线可见，否则所有事件都将被隐藏并且代码将无法像$(this).is(":visible")总是返回假。