jQuery根据复选框隐藏父div

Question

我有以下代码:http://jsfiddle.net/p9s0pdao/

$("#filters :checkbox").change(function() {
    $(".listing-details > div").hide();
    $("#filters :checkbox:checked").each(function() {
        $(".listing-details ." + $(this).val()).show();
    });
});

我需要隐藏以 .wpbdp-listing 开头的 div，而不是隐藏 .listing-details css 类

我该如何解决这个问题？

谢谢。

Answer 1

最好把事情分开和干净:我的意思是我们可以有一个函数来做所有事情，这样我们就可以随时调用它。我的意思是在 DOM 加载之后调用它，然后在复选框更改时调用它。

ToggleThings();

$("#filters :checkbox").change(function() {
    ToggleThings();
});

function ToggleThings()
{
    $(".wpbdp-listing").hide();
    $("#filters :checkbox:checked").each(function() {
        $('.' + $(this).val()).closest('.wpbdp-listing').show();
    });
}

http://jsfiddle.net/p9s0pdao/1/

更新(最终解决方案):

ToggleThings();

$("#filters :checkbox").change(function() {
    ToggleThings();
});

function ToggleThings()
{
    var checkedboxes = $("#filters :checkbox:checked");

    if (checkedboxes.length > 0)
    {
        $(".wpbdp-listing:visible").hide();

        checkedboxes.each(function() {
            $('.' + $(this).val()).closest('.wpbdp-listing').show();
        });
    }
    else
    {
        $(".wpbdp-listing").show();
    }
}

http://jsfiddle.net/p9s0pdao/4/