Question

我有一个使用PHP的MySQL数据库，生成以下HTML。

<div class="item filterable united-states" data-amount="14000">
    Supplier Country: United States
    Delivery Estimation: 5 days
    Quote Amount: 14000
<div>

<div class="item filterable united-states" data-amount="7000">
    Supplier Country: United States
    Delivery Estimation: 30 days
    Quote Amount: 7000
<div>

<div class="item filterable united-kingdom" data-amount="13000">
    Supplier Country: United Kingdom
    Delivery Estimation: 15 days
    Quote Amount: 13000
<div>

<div class="item filterable germany" data-amount="8700">
    Supplier Country: Germany
    Delivery Estimation: 22 days
    Quote Amount: 8700
<div>

我还创建了一个循环，根据结果集中的国家/地区创建复选框。它的HTML看起来像：

<div class="checkbox check-default" id="country-filter">
    <strong>Countries</strong><br>

    <input type="checkbox" value="germany" id="germany-checkbox" />
    <label for="germany-checkbox">Germany</label>

    <input type="checkbox" value="united-kingdom" id="united-kingdom-checkbox" />
    <label for="united-kingdom-checkbox">United Kingdom</label>

    <input type="checkbox" value="united-states" id="united-states-checkbox" />
    <label for="united-states-checkbox">United States</label>
</div>

所以我找到了一些jQuery片段并对其进行了编辑以过滤结果：

$("#country-filter :checkbox").click(function() {
$("div.item").hide();
$("#country-filter :checkbox:checked").each(function() {
$("div." + $(this).val()).show().slideDown(400);
});
});

jQuery代码段有助于过滤结果，但不能按我希望的方式过滤。加载结果很好，当选中复选框时，它会得到应该显示的结果。但是当取消选中所有复选框时，所有结果都会消失，直到单击一个复选框。

另外，我想要另一个过滤器来处理与国家过滤器协同工作的金额部分。

我该如何解决？

Answer 1

对于第一个问题，请将$("div.item").hide();替换为

if ($("#country-filter :checkbox:checked").length > 0)
{
    $("div.item").hide();
}
else
{
    $("div.item").show();
}

另一方面，设置变量（javascript或jquery）并在进入每个循环之前将其设置为0。从您显示的每个div中抓取并添加data-amount参数的内容。完成后，您将拥有一个包含总数的变量

使用复选框过滤数据

1 个答案: