Jquery 使用多个HTML5数据属性进行产品筛选

我有一个功能，我想通过复选框返回基于用户制作的过滤器的产品

基本上：

每个产品都有多个数据属性，例如：数据品牌=宏碁，数据价格=2995，数据屏幕大小=15.6，数据处理器=英特尔

因此，假设我正在排队购买40种产品，用户需要能够缩小产品列表的范围

目前，我的函数显示了所有单击的内容，并且没有缩小产品列表的范围

我不是jqueryshark，我可以使用som输入来过滤产品

我在这里加了一把小提琴：

任何反馈都非常感谢，谢谢

这就是我目前的情况：

function filterFunction()
{
    //if( $( "input[name='screen_group[]']:checked" ).length > 0 ) 
    if( $( "input[type='checkbox']:checked" ).length > 0 ) 
    {
        $( '.produkt_gruppe_div' ).hide();

        searchScreens   = $( "input[name='screen_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // <----  
        searchBrands    = $( "input[name='brand_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // <----   
        // Combine marked filters (checkboxes)
        var params      = searchScreens.concat( searchBrands );

        // Available data-atr, from the first product element
        filterAttributtes = $( '.product_gruppe_div:first' ).data();

        var searchValues = [];
        // Loop marked checkboxes,display products that has a matching data-atr="value"
        $.each( params, function( key, value )
        {           
            $('[data-screensize="' + value + '"]').show();
            $('[data-brand_name="' + value + '"]').show();          

            //$( '.produkt_gruppe_div' ).filter('[data-screensize="' + value + '"]').addClass('screen').fadeIn(300);    

            //$( '.produkt_gruppe_div' ).filter('[data-brand_name="' + value + '"]').addClass('brand').fadeIn(300);         
        }); 
    } 
    else 
    {
        // Vis alle, hvis der ikke er afmærket noget
        $('.produkt_gruppe_div').show();
    }   
}

所以当用户选择Acer和Lenovo作为品牌，屏幕尺寸分别为15.6和14时，我只需要显示data Brand=Acer of lenove和data screensize=15.6或14的产品，以此类推

目前，每个产品有6个过滤器，用于定义产品详细信息。我有一个Tjeckbox，它的ID对应于数据atr=值

希望有人能看到我如何隐藏所有内容，然后只显示包含其中任何一个值的产品

向你问好，克莱姆

编辑：：：

这是我的标记：

和复选框：

<input type="checkbox" name="screen_group[]" value="18.4" id="18.4" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">18,4"</span><br />
<input type="checkbox" name="screen_group[]" value="17.3" id="17.3" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">17,3"</span><br />
<input type="checkbox" name="screen_group[]" value="15.6" id="15.6" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">15,6"</span><br />
<input type="checkbox" name="screen_group[]" value="15.5" id="15.5" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">15,5"</span><br />
<input type="checkbox" name="screen_group[]" value="15.4" id="15.4" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">15,4"</span><br />
<input type="checkbox" name="screen_group[]" value="14" id="14" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">14"</span><br />
<input type="checkbox" name="screen_group[]" value="13.3" id="13.3" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">13,3"</span><br />
<input type="checkbox" name="screen_group[]" value="12.5" id="12.5" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">12,5"</span><br />
<input type="checkbox" name="screen_group[]" value="11.6" id="11.6" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">11,6"</span><br />
<input type="checkbox" name="screen_group[]" value="11" id="11" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">11"</span><br />
<input type="checkbox" name="screen_group[]" value="10.1" id="10.1" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">10,1"</span><br />

同样的原则适用于品牌、处理器等

编辑两个：

这里是另一个选项，我可以列出多个品牌，然后检查屏幕上显示的内容，然后根据屏幕大小运行检查

这让我可以对所有品牌进行过滤，屏幕大小为15.6

问题是，我只能选择一个屏幕大小复选框，如果我选择多个，我会丢失屏幕上的所有产品

似乎看不到，我可以修改它

帕特尔：

你认为它可以集成到你的代码中吗

最好的方法是，Klemme通过这个例子开发代码

比如说

你的div看起来像

<div class="products" data-brand="acer" data-price="2995" data-screensize="15.6" data-processor="intel">
   Product Details
</div>
<div class="products" data-brand="acer" data-price="3000" data-screensize="13" data-processor="intel">
   Product Details
</div>

然后按属性显示特定的div

例：

参考：

最终版本 更新：您选择一个屏幕，您将可用的品牌变为红色，如果您单击任何带有红色的品牌，您将看到过滤器的工作情况。现在，如果您单击任何其他选项，然后单击红色，您将看到更多产品添加到网格中。我希望这就是你想要的

我为演示目的制作了一把小提琴：

希望这有助于理解逻辑

HTML：这只是一个理解逻辑的示例

---

共享示例html编码你可以提供一个示例标记如果可能的话创建一个提琴我最近在我的项目中为产品过滤做了这个。。。还有非常大的jquery代码…谢谢Patel！不幸的是，它似乎不像我所追求的那样起作用。如果你全部选中，你只得到输出中最后一个选中的。。如果要选择多个选项，则会失败。。这只是一个样本。。。我最近为我的项目创建了这个，它非常困难。所以给我点时间，我会帮你做小提琴的。谢谢！关于这个过滤功能，你的想法和我的一样。最理想的方法是使其动态化，这样就可以设置更多的过滤选项。我在JSFIDLE和Javascript中做了一些清理。希望这有助于了解我在追求什么！您可能需要检查JQuery库是否正确地附加在fiddle中。应该是：-非常好的帕特尔！我想展示多个品牌，同时使用屏幕大小为15.4的特定过滤器，举个例子。我会在这里发布一个答案，代码允许我选择多个品牌，然后将它们缩小到15.4。然后我的问题是，我只能选择一个屏幕大小与我的当前代码，然后我失去了所有的产品从屏幕上。你认为有可能整合到你的功能中吗？

function filterFunction()
{
if( $( "input[type='checkbox']:checked" ).length > 0 ) 
{
$( '.produkt_gruppe_div' ).hide();

searchScreens   = $( "input[name='screen_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // <----  
    searchBrands    = $( "input[name='brand_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // <----   

var searchValues = [];

$.each( searchBrands, function( key, value )
{   
    console.log( searchBrands );    

    // Vis kun de valgte brands på siden
    $('[data-brand_name="' + value + '"]').show();
    // $('[data-screensize="' + value + '"]').show();       

    // Align produkt_gruppe_div efter indlæsning
    alignFilteredProducts();    

}); 


    $.each( searchScreens, function( key, value )
    {                       
    $('.produkt_gruppe_div').each(function( index, element ) 
    {               
    if( $( this ).is( ':visible' ) )
    {
    // Vis kun de valgte screensizes på siden
    //$( '[data-screensize="' + value + '"]' ).show();
    $( '.produkt_gruppe_div' ).not('[data-screensize="' + value + '"]').fadeOut( 300 );
 }
    alignFilteredProducts();
    });
});                 

} 
else 
{
$('.produkt_gruppe_div').show();
}   
}

<div class="products" data-brand="acer" data-price="2995" data-screensize="15.6" data-processor="intel">
   Product Details
</div>
<div class="products" data-brand="acer" data-price="3000" data-screensize="13" data-processor="intel">
   Product Details
</div>

$("div.produts").hide();

$('div.produts[data-brand="acer"][data-screensize="13"]').show();

<div class="checkbox">
    <label>
        <input type="checkbox" id="acer" value="acer" class="cb" />Acer</label>
    <label>
        <input type="checkbox" id="dell" value="dell" class="cb" />Dell</label>
    <label>
        <input type="checkbox" id="hp" value="hp" class="cb" />HP</label>
</div>
<div class="container">
    <div class="product available filter-enable" data-name="acer">acer</div>
    <div class="product available filter-enable" data-name="acer">acer</div>
    <div class="product available filter-enable" data-name="acer">acer</div>
    <div class="product available filter-enable" data-name="acer">acer</div>
    <div class="product available filter-enable" data-name="dell">dell</div>
    <div class="product available filter-enable" data-name="dell">dell</div>
    <div class="product available filter-enable" data-name="dell">dell</div>
    <div class="product available filter-enable" data-name="dell">dell</div>
    <div class="product available filter-enable" data-name="dell">dell</div>
    <div class="product available filter-enable" data-name="hp">hp</div>
    <div class="product available filter-enable" data-name="hp">hp</div>
    <div class="product available filter-enable" data-name="hp">hp</div>
    <div class="product available filter-enable" data-name="hp">hp</div>
    <div class="product available filter-enable" data-name="hp">hp</div>
</div>

$(document).on("change", ".cb", function () {
    var selectedCBValue = $(this).val();
    if ($(this).is(":checked")) {
        ShowAvailableProducts(selectedCBValue);
    } else {
        ShowAllProducts();
    }
});

function ShowAvailableProducts(selectedName) {
    $('.product').each(function (k, div) {
        var divValue = $(div).data("name");
        if (divValue == selectedName) {
            $(div).show();
        } else {
            $(div).hide();
        }
    });
}

function ShowAllProducts() {
    $('.product').show();
}