CODEWITHSUNDEEP
javascriptphpjquery
durai
durai

Reputation: 13

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

Upvotes: 1

Views: 2583

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337570

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

Upvotes: 1

Related Questions