最终Fiddle

Question

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

基本上：

每个产品都有多个数据归属，例如：data-brand =＆＃34; acer＆＃34;，data-price =＆＃34; 2995＆＃34;，data-screensize =＆＃34; 15.6＆＃34;，data-processor =＆＃34; intel＆＃34;

所以说我排队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();
    }   
}

因此，当用户选择＆＃34; Acer和Lenovo＆＃34;作为品牌，＆＃34; 15.6和14＆＃34;作为屏幕尺寸，我只需要显示数据品牌=＆＃34; acer of lenove＆＃34;和data-screensize =＆＃34; 15.6或14＆＃34;等等。

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

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

最好的问候，Klemme

编辑编辑:::

这是我的标记：

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

这让我可以过滤所有品牌，并在15.6＆＃34;屏幕上显示。

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

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

PATEL：

您认为它可以集成到您的代码中：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();
}   
}

最好的，Klemme

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>

您可以按

过滤div

首先你必须隐藏所有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，如果您点击任何带有RED的品牌，您应该会看到过滤器的工作情况。现在，如果您点击任何其他选项然后RED，您将看到在GRID中添加更多产品。我希望这是你想要的......

我为DEMO目的创造了一个小提琴：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();
}

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

2 个答案:

最终Fiddle

HTML :(这只是了解逻辑的一个示例）

的Jquery：