Question

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

我已经删除了＆＃34; All＆＃34;按钮，但现在我希望它在加载时显示特定类别而不是一切。下面是我的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>

JS：

$(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");


});

Answer 1

我不确定您的类别是什么，但是您是否只是将$('button[data-filter="drinks"]').click()添加到$(document).ready(...)函数的末尾？

这样，当脚本执行完毕后，将调用该按钮，从而显示您的类别。

如何为引导程序组合选择默认类别

1 个答案: