Javascript 如何为引导产品组合选择默认类别

我在网站上有一个投资组合部分。默认情况下，它当前显示每个项目

我已经删除了“All”按钮，但现在我希望它显示加载时的特定类别，而不是所有内容。下面是我的HTML和JS

    <div class="sort" align="center">
<!--            <button class="btn btn-default filter-button" data-filter="all">All</button>-->
        <button class="btn btn-default filter-button" data-filter="drinks">Vending Machines</button>
        <button class="btn btn-default filter-button" data-filter="chips">Vending Machine Parts</button>
    </div>
    <br/><br/>
        <br/>
        <br/>

        <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-6 filter drinks">
            <div class="productimgwrap">
            <img src="images/products/drinks/canned-regular-cola.jpg" class="img-responsive"></div>
        </div>

        <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-6 filter chips">
            <div class="productimgwrap">
            <img src="images/products/chips/lays-oven-baked-originals-chip.jpg" class="img-responsive"> </div>
        </div>

        <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-6 filter drinks">
            <div class="productimgwrap">
            <img src="images/products/drinks/canned-diet-cola.jpg" class="img-responsive"> </div>
        </div>

        <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-6 filter candy">
            <div class="productimgwrap">
            <img src="images/products/candy/Hershey-chocolate-bar---plain.jpg" class="img-responsive"> </div>
        </div>

---

我不确定您的类别是什么，但您能否只添加

$（'button[data filter=“drinks”]”）。单击（

）到

$（文档）的末尾。准备好（…）

函数了吗

---

这样，当脚本完成执行时，按钮将被调用，从而显示您的类别。

是的……是的，我可以。我知道这是件小事。谢谢您！

$(document).ready(function(){    


$(".filter-button").click(function(){
    var value = $(this).attr('data-filter');

    if(value == "all")
    {                       
        $('.filter').removeClass('hidden');
        $('.filter').show('0');
    }
    else
    {
        $('.filter[filter-item="'+value+'"]').removeClass('hidden');
        $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');

    }
});

if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");


});