使用 JQuery 复选框过滤项目列表

Question

我有一组两个不同的复选框；价格和类别。

最初，我希望显示整个结果列表，但随着过滤器的应用，列表会发生变化，然后当过滤器被移除或全部移除时，列表会调整。

我正在使用 JQuery 过滤结果，但我似乎无法得到它，因此当没有勾选复选框时，所有产品都会显示，例如，如果没有勾选价格，但工具之一在类别中，所有仪器显示。它们由 <li> 标记中的类标记标识，在我的代码中，它是从 JSON 文件设置的，但在 JSFiddle 中，我只是放置了一些示例测试数据。

我创建了一个 JSFiddle，但它似乎没有运行，但完全相同的代码在我的笔记本电脑上运行。

这是我的代码：

$(document).ready(function() {
  $("#price :checkbox").click(function() {
    $("li").hide();
    $("#price :checkbox:checked").each(function() {
      $("." + $(this).val()).show();
    });
  });

  $("#category :checkbox").click(function() {
    $("li").hide();
    $("#category :checkbox:checked").each(function() {
      $("." + $(this).val()).show();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="price">
  <p id="fHeader">Price</p>
  <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5
  <br>
  <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10
  <br>
  <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50
  <br>
  <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100
  <br>
  <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500
  <br>
  <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000
  <br>
  <input type="checkbox" name="price" value="p7" id="p7" />£1000 +
  <br>
</section>

<section id="category">
  <p id="fHeader">Category</p>
  <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments
  <br>
  <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music
  <br>
  <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories
  <br>
</section>

<article id="products">
  <ul id="productList">
    <li class="instruments p5 buffet woodwind clarinet">Buffet B12 Clarinet £400</li>
    <li class="instruments p7 yamaha woodwind clarinet">Yamaha Clarinet £1700</li>
    <li class="instruments p6 trevorjames woodwind alto-saxophone">Trevor James Alto Saxophone £700</li>
    <li class="instruments p3 aulos woodwind recorder">Aulos Recorder £16</li>
  </ul>
</article>

任何有关如何从这里处理它的帮助将不胜感激。谢谢。

Answer 1

我会使用数据属性而不是类。这意味着您可以将复选框单击分组为一个功能。见下文：

$(document).ready(function () {

    $('#filters :checkbox').click(function () {
        if ($('input:checkbox:checked').length) {
            $('li').hide();
            $('input:checkbox:checked').each(function () {
                $('li[data-' + $(this).prop('name') + '*="' + $(this).val() + '"]').show();
            });
        } else {
            $("li").show();
        }
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<article id="filters">
    <section id="price">
        <p id="fHeader">Price</p>
        <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5
        <br/>
        <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10
        <br/>
        <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50
        <br/>
        <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100
        <br/>
        <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500
        <br/>
        <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000
        <br/>
        <input type="checkbox" name="price" value="p7" id="p7" />£1000 +
        <br/>
    </section>
    <section id="category">
        <p id="fHeader">Category</p>
        <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments
        <br/>
        <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music
        <br/>
        <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories
        <br/>
    </section>
</article>
<article id="products">
    <ul id="productList">
        <li data-price="p5" data-category="instruments">Buffet B12 Clarinet £400</li>
        <li data-price="p7" data-category="instruments">Yamaha Clarinet £1700</li>
        <li data-price="p6" data-category="instruments">Trevor James Alto Saxophone £700</li>
        <li data-price="p3" data-category="instruments">Aulos Recorder £16</li>
    </ul>
</article>

我还注意到您有两个id="fHeader"。这很糟糕，真的很糟糕......

---

编辑正确和/或搜索

这有点复杂。它创建一个值数组和一个类型数组。然后，我们遍历每个 LI，遍历每种类型，遍历每个值（在循环中循环，哎呀！），其基础是所有类型都需要至少一个正确的值才能显示 LI。

我还会通过在它们之前和之后放置 ; 或其他内容来确保您的值是不同的，因为例如“piano”也将匹配“grand-piano”但是“;piano;”将不匹配 ";grand-piano;"

$('#filters input:checkbox').click(function () {
    if ($('input:checkbox:checked').length) {
        var arrSelected = []; // Create Array of Values
        var arrTypes = []; // Create Array of Types
        $('input:checkbox:checked').each(function () {
            if (arrSelected[$(this).prop('name')] == undefined) {
                arrSelected[$(this).prop('name')] = [];
            }
            arrSelected[$(this).prop('name')].push($(this).val());
            if ($.inArray($(this).prop('name'), arrTypes) < 0) {
                arrTypes.push($(this).prop('name'));
            }
        });
        $('li').each(function() {
            $(this).hide();   
            var intKeyCount = 0;
            for (key in arrTypes) { // AND (check count of matching types)
                var blnFound = false;
                for (val in arrSelected[arrTypes[key]]) { // OR (check one of values matches type)
                    if ($(this).attr('data-' + arrTypes[key]).indexOf(arrSelected[arrTypes[key]][val]) > -1) {                       
                        blnFound = true;
                        break;
                    }
                }
                if (blnFound) {
                    intKeyCount++;
                }
            }
            if (intKeyCount > 0 && intKeyCount != arrTypes.length - 1) {
                $(this).show();   
            }
        });
    } else {
        $("li").show();
    }
});

body {
    font-family:arial;
    font-size:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<article id="filters">
    <section id="price">
        <p id="fHeader">Price</p>
        <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5
        <br/>
        <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10
        <br/>
        <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50
        <br/>
        <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100
        <br/>
        <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500
        <br/>
        <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000
        <br/>
        <input type="checkbox" name="price" value="p7" id="p7" />£1000 +
        <br/>
    </section>
    <section id="category">
        <p id="fHeader">Category</p>
        <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments
        <br/>
        <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music
        <br/>
        <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories
        <br/>
    </section>
</article>
<article id="products">
    <ul id="productList">
        <li data-price="p5" data-category="instruments">Buffet B12 Clarinet £400</li>
        <li data-price="p7" data-category="instruments">Yamaha Clarinet £1700</li>
        <li data-price="p6" data-category="instruments">Trevor James Alto Saxophone £700</li>
        <li data-price="p3" data-category="instruments">Aulos Recorder £16</li>
    </ul>
</article>

Answer 2

在每个循环之前显示所有列表项并检查检查了多少个复选框，如果值为 0 则不执行任何操作。