使用多个 HTML5 数据属性进行产品过滤

Question

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

基本上：

每个产品都有多个数据属性，例如：data-brand="acer", data-price="2995", data-screensize="15.6", data-processor="intel"

假设我要排列 40 个产品，用户需要能够缩小产品列表的范围。

目前我的功能会显示所有点击的内容，并且不会缩小产品列表的范围。

不是 JQuery 鲨鱼，我可以使用 som 输入来了解如何过滤产品。

---

我在这里添加了一个小提琴：http://jsfiddle.net/Klemme/czE6x/14/

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

---

这是我目前拥有的：

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();
    }   
}

所以当用户选择“宏碁和联想”作为品牌，选择“15.6 和 14”作为屏幕尺寸时，我只需要显示 data-brand="acer of lenove" 和 data-screensize="15.6 或14" 等等。

目前每个产品都有 6 个过滤器，用于定义产品详细信息。我有一个 ID 对应于 data-atr="value" 的 tjeckboxes。

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

最好的问候，克莱姆

编辑编辑:::

这是我的标记：

<div class="product_gruppe_div" data-brand="acer" data-screensize="15.6" data-processor="intel"> - Product info - </div>

<div class="product_gruppe_div" data-brand="lenovo" data-screensize="15.6" data-processor="intel"> - Product info - </div>

<div class="product_gruppe_div" data-brand="acer" data-screensize="15.6" data-processor="intel"> - Product info - </div>

<div class="product_gruppe_div" data-brand="hp" data-screensize="15.4" data-processor="intel"> - Product info - </div>

<div class="product_gruppe_div" data-brand="hp" data-screensize="14" data-processor="intel"> - Product info - </div>

<div class="product_gruppe_div" data-brand="fujitsu" data-screensize="14" data-processor="intel"> - Product info - </div>

还有复选框：

<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 />

品牌、处理器等原则相同。

编辑二：

这是另一个选项，我可以在其中列出多个品牌，然后 tjeck 屏幕上可见的内容，然后在屏幕尺寸上运行 tjeck。

这让我可以过滤所有品牌，屏幕尺寸为 15.6 英寸。

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

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

帕特尔：

您认为它可以集成到您的代码中吗：http://jsfiddle.net/Klemme/czE6x/38/？

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();
}   
}

最好的，克莱姆

Answer 1

通过这个例子开发你的代码

例如

您的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>

您可以通过

过滤divs

首先你必须隐藏所有products div

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

然后按属性显示特定的div

例如：

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

参考：http://api.jquery.com/multiple-attribute-selector/

Answer 2

最终Fiddle

更新：您选择一个屏幕，您将可用品牌变为红色，如果您点击任何带有红色的品牌，您应该会看到过滤器的工作原理。现在，如果您单击任何其他选项，然后单击 RED，您将看到 GRID 中添加了更多产品。我希望这是你想要的..

我为演示目的创建了一个小提琴：http://jsfiddle.net/xZLrf/

希望这对理解逻辑很有用..

HTML：（这只是理解逻辑的示例）

<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>

jquery：

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