durai durai - 2 months ago 8
Javascript Question

Multiple Filter using jquery with data attribute

I need to use multiple filters using

data
attributes. It's working in combination but not working alone. Here is my code:

<ul>
<li>
<div class="sts">
<h1>filter 1</h1>
</h1>
<div class="checkbox">
<label>
<input data-id="1" class="st" type="checkbox" />
1
</label>
</div>
<div class="checkbox">
<label>
<input data-id="2" class="st" type="checkbox" />
2
</label>
</div>
<div class="checkbox">
<label>
<input data-id="3" class="st" type="checkbox" />
3
</label>
</div>
</div>
</li>
<li>
<h1>filter 2</h1>
<div class="ats">
<div class="checkbox">
<label>
<input data-id="foo" class="at" type="checkbox" />
foo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="boo" class="at" type="checkbox" />
boo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="bar" class="at" type="checkbox" />
bar
</label>
</div>
</div>
</li>
<li>
<h1>filter 3</h1>
<div class="dpts">
<div class="checkbox">
<label>
<input data-id="a" class="dpt" type="checkbox" />
a
</label>
</div>
<div class="checkbox">
<label>
<input data-id="b" class="dpt" type="checkbox" />
b
</label>
</div>
<div class="checkbox">
<label>
<input data-id="c" class="dpt" type="checkbox" />
c
</label>
</div>
<div class="checkbox">
<label>
<input data-id="d" class="dpt" type="checkbox" />
d
</label>
</div>
</div>
</li>
</ul>

<ul class="list">
<li data-a="foo" data-st="1" data-dpt="a">asdw</li>
<li data-a="boo" data-st="2" data-dpt="c">qwedf</li>
<li data-a="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-a="bar" data-st="3" data-dpt="b">tazxsw</li>
<li data-a="bar" data-st="1" data-dpt="b">zxcvb</li>
<li data-a="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-a="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-a="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>


$(function() {
$('.at, .dpt,.st').on('click', function() {
var checkedat = $('.at:checked');
var checkeddept = $('.dpt:checked');
var checkedst = $('.st:checked');
if (checkedat.length || checkeddept.length || checkedst.length) {
if (checkeddept.length === 0) {
$('.list > li').hide();
$.each(checkedat, function() {
var prdId = $(this).attr('data-id');
$.each(checkedst, function() {
var brandId = $(this).attr('data-id');
$('.list > li[data-a="' + prdId + '"][data-st="' + brandId + '"]').show();
});
});
} else if (checkedat.length === 0) {
$('.list > li').hide();
$.each(checkedst, function() {
var brandId = $(this).attr('data-id');
$.each(checkeddept, function() {
var DeptId = $(this).attr('data-id');
$('.list > li[data-st="' + brandId + '"][data-dpt="' + DeptId + '"]').show();
});
});
} else if (checkedat.length === 0) {
$('.list > li').hide();
$.each(checkeddept, function() {
var DeptId = $(this).attr('data-id');
$.each(checkedst, function() {
var brandId = $(this).attr('data-id');
$('.list > li[data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show();
});
});
} else {
$('.list > li').hide();
$.each(checkedat, function() {
var prdId = $(this).attr('data-id');
$.each(checkedst, function() {
var brandId = $(this).attr('data-id');
$.each(checkeddept, function() {
var DeptId = $(this).attr('data-id');
$('.list > li[data-a="' + prdId + '"][data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show();
});
});
});

}
} else {
$('.list > li').show();
}
});
});


Here is a jsFiddle link

If i check any options from filter 1 & filter 2 & filter 3 its working , but when i click any option from filter 1 or filter 2 its not working

Answer

Your logic is a lot more complicated than it needs to be. You should look in to using DRY principles as you can make this much more simple.

First, put a common class on all the checkboxes (I used .stat in my example). Then use a data attribute to denote the type of the stat. From there you can loop through each checked stat and hide/show the related li by using filter() to match them based on the data-stat and data-id. Something like this:

$('.stat').on('click', function() {
  var $stats = $('.stat:checked');
  var $items = $('.list li');

  $items.show();
  if ($stats.length == 0)
    return;

  $stats.each(function() {
    var $stat = $(this);
    $items.filter(function() {
      return $(this).data($stat.data('type')) != $stat.data('id');
    }).hide();
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="sts">
      <h1>filter 1</h1>
      <div class="checkbox">
        <label>
          <input data-id="1" data-type="st" class="stat st" type="checkbox" />1
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="2" data-type="st" class="stat st" type="checkbox" />2
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="3" data-type="st" class="stat st" type="checkbox" />3
        </label>
      </div>
    </div>
  </li>
  <li>
    <h1>filter 2</h1>
    <div class="ats">
      <div class="checkbox">
        <label>
          <input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar
        </label>
      </div>
    </div>
  </li>
  <li>
    <h1>filter 3</h1>
    <div class="dpts">
      <div class="checkbox">
        <label>
          <input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d
        </label>
      </div>
    </div>
  </li>
</ul>

<ul class="list">
  <li data-at="foo" data-st="1" data-dpt="a">asdw</li>
  <li data-at="boo" data-st="2" data-dpt="c">qwedf</li>
  <li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
  <li data-at="bar" data-st="3" data-dpt="b">tazxsw</li>
  <li data-at="bar" data-st="1" data-dpt="b">zxcvb</li>
  <li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
  <li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
  <li data-at="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>

The above is performing 'AND' logic on each chosen option. To change this to an 'OR', use the below:

$('.stat').on('click', function() {
  var $stats = $('.stat:checked');
  var $items = $('.list li');

  if ($stats.length == 0) {
    $items.show();
    return;
  }

  $items.hide();
  $stats.each(function() {
    var $stat = $(this);
    $items.filter(function() {
      return $(this).data($stat.data('type')) == $stat.data('id');
    }).show();
  })
});