CODEWITHSUNDEEP
filterattributes
Doodl
Doodl

Reputation: 247

Filter multiple data-attributes

How to filter from classes to data-filter in this filter?

From ( link: http://jsfiddle.net/ar3PY/2/ )

class="filterme Audi Compact silver blue red"

to ( http://jsfiddle.net/ar3PY/95/ )

class="filterme"  data-filter="Audi Compact silver blue red"

Upvotes: 1

Views: 2395

Answers (2)

Doodl
Doodl

Reputation: 247

How to show content of checked filter that only has exacly same attribute for each category?

see also image for explanation:

How to show content of checked filter that only has exacly same attribute for each category? see also image:

.

JSFIDDLE HERE: http://jsfiddle.net/ar3PY/104

.

<br> var getFilter = function (category) {
var filter = $("#filters ." + category + ":checked").map(function () {
    return '[data-filter*="' + this.value + '"]';
}).get().join(",");
filter = (filter.length > 0) ? filter : "*";
return filter;

}

$("#filters :checkbox").click(function () { var all = $(".filterme"); var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color")); all.not(tgts).hide(); tgts.show(); });

Upvotes: 0

Vindhyachal Kumar
Vindhyachal Kumar

Reputation: 1794

Check this working code.

var getFilter = function (category) {
    var filter = $("#filters ." + category + ":checked").map(function () {
        return '[data-filter*="' + this.value + '"]';
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    return filter;
}

$("#filters :checkbox").click(function () {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<p><strong>Find the right model: </strong>Select one or more checkboxes to filter your choice:</p>


<table id="filters" width="620px">
    <tr>
        <td width="144" align="left" valign="top">
            <input type="checkbox" class="brand" value="Audi" id="filter-Audi">Audi<br>
            <input type="checkbox" class="brand" value="BMW" id="filter-BMW">BMW<br>
        </td>
        <td width="233" align="left" valign="top">
            <input type="checkbox" class="class" value="Compact" id="filter-Compact">Compact<br>
            <input type="checkbox" class="class" value="Limousine" id="filter-Limousine">Limousine<br>
            <input type="checkbox" class="class" value="SUV" id="filter-SUV">SUV<br>
            <input type="checkbox" class="class" value="Sport" id="filter-Sport">Sport<br>
        </td>
        <td width="233" align="left" valign="top">
            <input type="checkbox" class="color" value="silver" id="filter-silver">silver<br>
            <input type="checkbox" class="color" value="blue" id="filter-blue">blue<br>
            <input type="checkbox" class="color" value="red" id="filter-red">red<br>
            <input type="checkbox" class="color" value="white" id="filter-white">white<br>
        </td>
    </tr>
</table>


<div class="text"></div>
<div id="log" style="width: 620px; line-height: 19px"></div>

<!-- new Car 1 -->

<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="Audi Compact silver blue red">
    <strong>Audi A1</strong><br />
    Audi, Compact, silver, blue, red
</div>
<br />

<!-- new Car 2 -->

<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="BMW Compact red white">
    <strong>BMW 118i</strong><br />
    BMW Compact red white
</div>
<br />

<!-- new Car 3 -->

<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="Audi Limousine Sport silver blue red">
    <strong>Audi A4</strong><br />
    Audi Limousine Sport silver blue red
</div>
<br />

<!-- new Car 4 -->

<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="BMW SUV Sport white blue silver">
    <strong>BMW X3</strong><br />
    BMW SUV Sport white blue silver
</div>
<br />

<!-- new Car 5 -->

<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="Audi Sport Silver">
    <strong>Audi R8</strong><br />
    Audi Sport Silver
</div>
<br />

<!-- new Car 6 -->

<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="BMW Sport white silver blue">
    <strong>BMW Concept X</strong><br />
    BMW Sport white silver blue
</div>
<br />

Upvotes: 3

Related Questions