Question

我是编程的新手，我正试图找出如何过滤div类别2。就像过滤我们欧盟一样，它可以工作，但下一个剂量工作我该怎么做？

脚本

 var sections = $('.sectionContent');
function updateContentVisibility(){
    var checked = $("#filterControls :checkbox:checked");
    if(checked.length){
        sections.fadeOut(400);
        checked.each(function(){
            $("." + $(this).val()).fadeIn(600);
        });
    } else {
        sections.fadeIn(500);
    }
}

$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();

});

HTML 的

 <div id="filterControls">
        <h3>Buy With: </h3>
            <label><input type="checkbox" value="cash" name="cash" class="check"/> Cash</label>
            <label><input type="checkbox" value="card" name="card" class="check"/> CreditCard</label>


            <label><input type="checkbox" value="us" name="us" class="check"/> us</label>
            <label><input type="checkbox" value="eu" name="eu" class="check"/> eu</label>
        </div>

        <div class="container">


        <div class=" box sectionContent us cash">
        <p>
        us cash
        </p>
        </div>

        <div class=" box sectionContent eu card">
        <p>
        Eu Card
        </p>
        </div>

        <div class=" box sectionContent us card">
        <p>
      us card
        </p>
        </div>

        <div class=" box sectionContent eu cash">
        <p>
        eu cash
        </p>
        </div>
        </div>

制作一个小提琴来展示我的意思。小提琴：https://jsfiddle.net/xtg7a22g/14/

任何帮助将不胜感激！

最诚挚的问候！

Answer 1

你实际上工作得很好......如果你想要OR逻辑，也就是说，如果你想要显示与复选框任何匹配的所有内容。

然而，据推测，您想要AND逻辑，选择必须匹配所选复选框的所有。

这样就可以了：

    var classes = '';
    checked.each(function(){
        classes += "." + $(this).val();
    });
    $(classes).fadeIn(600);

隐藏显示包含2个不同类别复选框的div

1 个答案: