使用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,循环遍历每个类型,循环遍历每个值(循环内循环内的循环,yikes!),其基础是所有类型都需要至少一个正确的值才能显示LI.

我还要通过;在它们之前和之后放置一个或多个东西来确保你的价值观是不同的,因为例如"钢琴"也将匹配"大钢琴"然而"钢琴"; 不会匹配";大钢琴";

$('#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>