Is there any way I can filter with multiple criteria using jQuery?

Question

So I tried this way to filter the boxes via multiple criteria, like when I choose "ON-TRACK" then "International", it should show me the only the "ON-TRACK" boxes with the "International" title, and if I choose "ON-TRACK" & "OFF-Track" together with "Technology" it should show nothing and so on...

I tried to play with the if statement and tried with loops but I couldn't find a way. Any tips? And thanks

$(document).ready(function() {
   
    let toShow = [];
    let noEl = [];
    $('.top-right a').click(function(e) {
        $(e.target).toggleClass('tag-active');
        let getId = e.target.id;
        let tagName = e.target.innerHTML;
        if (toShow.includes(getId)) {
            for (var i = 0; i < toShow.length; i ++) {
                if (toShow[i] == getId) { 
                    toShow.splice(i, 1);
                    break;
                }
            }
        }
        else {
            toShow.push(getId);
        }
        if  (noEl.includes(getId))  {
            for (let j = 0; j < noEl.length; j ++) {
                if (noEl[j] == getId) { 
                    $(`.list-body .${getId}`).fadeOut('fast');
                    noEl.splice(j, 1);
                    break;
                }
            }
        }
        if (toShow.length === 0) {
            $('#main .list-el').fadeIn('fast');
            $(`.list-body .tag-no-result`).fadeOut('fast');
        }
        else {
            $('#main .list-el').fadeOut('fast');
        }
        $.each(toShow, function(i, b) {
            $('#main .list-el'+'.'+b).fadeIn('fast');
        }); 
    });
});

.tag {
    border: 1px solid blue;
    display: inline-block;
    padding: 10px;
}

.myull {
    display: inline-block;
    border: 1px solid blue;
    padding: 5px
}
.btn {
    padding: 0px;
    font-size: 14px;
}
a {
    color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="m-4">
            <div class="list"> 
            <div class="top">
            <div class="top-right">
                <a id="tag-1" class="myull tag tag-1" href='#' class='tag'>ON-TRACK</a>
                <a id="tag-2" class="myull tag tag-2" href='#' class='tag'>OFF-TRACK</a>
                <a id="tag-3" class="myull tag tag-3" href='#' class='tag'>CRITICAL</a>
                <a id="tag-4" class="myull tag tag-4" href='#' class='tag'>NOT-STARTED</a>
                <a id="tag-5" class="myull tag tag-5" href='#' class='tag'>ONHOLD</a>
                <a id="tag-6" class="myull tag tag-6" href='#' class='tag'>CLOSED</a>
            </div>
            </div>
          <hr>
          <p class="pl-2">PORTFOLIO:</p>
            <div class="top">
            
            <div class="top-right myul">
                <a id="tag-7"  class="myull tag-7"  href='#'>Support</a>
                <a id="tag-8"  class="myull tag-8"  href='#'>Collaboration</a>
                <a id="tag-9"  class="myull tag-9"  href='#'>Quality</a>
                <a id="tag-10" class="myull tag-10" href='#'>DO</a>
                <a id="tag-11" class="myull tag-11" href='#'>Social</a>
                <a id="tag-12" class="myull tag-12" href='#'>University</a>
                <a id="tag-13" class="myull tag-13" href='#'>Technology</a>
            </div>
            </div>
          <hr>
          <p class="pl-2">OWNER:</p>
            <div class="top">
            <div class="top-right myul1">
                <a id="tag-14" class="myull tag-14"  href='#'>Jake</a>
                <a id="tag-15" class="myull tag-15"  href='#'>Adam</a>
                <a id="tag-16" class="myull tag-16"  href='#'>Mark </a>
                <a id="tag-17" class="myull tag-17" href='#'>Sam </a>
                <a id="tag-18" class="myull tag-18" href='#'>Sarah </a>
            </div>
            </div>
          </div>
<div class="container" style="background-color: aqua">
    <div class="row">
        <div id="main" class="col-md-12 parentClass">
                <div class="tag list-el tag-14 tag-1 tag-7  m-1">
                    <div>
                        <h4>ON-TRACK</h4>
                    </div>
                    <div>
                        <h5>Support</h5>
                    </div>
                    <div>
                        <h6>Jake</h6>
                    </div>        
                </div>
                <div class="tag list-el tag-14 tag-1 tag-8  m-1">
                    <div>
                        <h4>ON-TRACK</h4>
                    </div>
                    <div>
                        <h5>Collaboration</h5>
                    </div>
                    <div>
                        <h6>Jake</h6>
                    </div>      
                </div> 
                <div class="tag list-el tag-14 tag-2 tag-9  m-1">
                    <div>
                        <h4>OFF-TRACK</h4>
                    </div>
                    <div>
                        <h5>Quality</h5>
                    </div>
                    <div>
                        <h6>Jake</h6>
                    </div>      
                </div>
                <div class="tag list-el tag-15 tag-2 tag-10 m-1">
                    <div>
                        <h4>OFF-TRACK</h4>
                    </div>
                    <div>
                        <h5>DO</h5>
                    </div>
                    <div>
                        <h6>Adam</h6>
                    </div>      
                </div> 
                <div class="tag list-el tag-16 tag-3 tag-11 m-1">
                    <div>
                        <h4>CRITICAL</h4>
                    </div>
                    <div>
                        <h5>Social</h5>
                    </div>
                    <div>
                        <h6>Mark</h6>
                    </div>      
                </div> 
                <div class="tag list-el tag-17 tag-4 tag-12 m-1">
                    <div>
                        <h4>NOT-STARTED</h4>
                    </div>
                    <div>
                        <h5>University</h5>
                    </div>
                    <div>
                        <h6>Sam</h6>
                    </div>      
                </div>
                <div class="tag list-el tag-18 tag-4 tag-13 m-1">
                    <div>
                        <h4>ONHOLD</h4>
                    </div>
                    <div>
                        <h5>Technology</h5>
                    </div>
                    <div>
                        <h6>Sarah</h6>
                    </div>      
                </div>
        </div>
     </div>
</div>

ElectionBot · Accepted Answer · 2019-03-24 10:08:58Z

Look, it would be much easier to see what's going on if you add a classname when a particular toggle is active, then get the currently selected filters by let's say, the 'active' class, and then finally filter the items with the toggles which are active.

I've completely re-written the JavaScript event handler. See the comments in code below to understand what each line is doing:

$(function() {

  // Filter in the tag list clicked
  $('.list').on('click', '.tag', function() {

    // Toggle active class on clicked element
    $(this).toggleClass('active');

    // Get all active filters' tag class number (tag-xx)
    let activeGp1 = $('.top:eq(0) .tag.active').map((i, el) => el.className.match(/tag-\d+/)[0]).get();
    
    let activeGp2 = $('.top:eq(1) .tag.active').map((i, el) => el.className.match(/tag-\d+/)[0]).get();
    
    let activeGp3 = $('.top:eq(2) .tag.active').map((i, el) => el.className.match(/tag-\d+/)[0]).get();
    
    // Filter the items below, must match at least one single active filter in each filter group
    $('#main .list-el').hide().filter((i, el) => 
      (activeGp1.length == 0 || activeGp1.some(c => el.classList.contains(c))) && 
      (activeGp2.length == 0 || activeGp2.some(c => el.classList.contains(c))) && 
      (activeGp3.length == 0 || activeGp3.some(c => el.classList.contains(c)))
    ).show();

    // Return false since it's not a hyperlink
    return false;
  });

});

.tag {
  border: 1px solid blue;
  display: inline-block;
  padding: 10px;
}

.tag.active {
  background-color: #ffe;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.myull {
  display: inline-block;
  border: 1px solid blue;
  padding: 5px
}

.btn {
  padding: 0px;
  font-size: 14px;
}

a {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body class="m-4">
  <div class="list">
    <div class="top">
      <div class="top-right">
        <a class="myull tag tag-1">ON-TRACK</a>
        <a class="myull tag tag-2">OFF-TRACK</a>
        <a class="myull tag tag-3">CRITICAL</a>
        <a class="myull tag tag-4">NOT-STARTED</a>
        <a class="myull tag tag-5">ONHOLD</a>
        <a class="myull tag tag-6">CLOSED</a>
      </div>
    </div>
    <hr>
    <p class="pl-2">PORTFOLIO:</p>
    <div class="top">

      <div class="top-right myul">
        <a class="myull tag tag-7">Support</a>
        <a class="myull tag tag-8">Collaboration</a>
        <a class="myull tag tag-9">Quality</a>
        <a class="myull tag tag-10">DO</a>
        <a class="myull tag tag-11">Social</a>
        <a class="myull tag tag-12">University</a>
        <a class="myull tag tag-13">Technology</a>
      </div>
    </div>
    <hr>
    <p class="pl-2">OWNER:</p>
    <div class="top">
      <div class="top-right myul1">
        <a class="myull tag tag-14">Jake</a>
        <a class="myull tag tag-15">Adam</a>
        <a class="myull tag tag-16">Mark </a>
        <a class="myull tag tag-17">Sam </a>
        <a class="myull tag tag-18">Sarah </a>
      </div>
    </div>
  </div>
  <div class="container" style="background-color: aqua">
    <div class="row">
      <div id="main" class="col-md-12 parentClass">
        <div class="tag list-el tag-14 tag-1 tag-7  m-1">
          <div>
            <h4>ON-TRACK</h4>
          </div>
          <div>
            <h5>Support</h5>
          </div>
          <div>
            <h6>Jake</h6>
          </div>
        </div>
        <div class="tag list-el tag-14 tag-1 tag-8  m-1">
          <div>
            <h4>ON-TRACK</h4>
          </div>
          <div>
            <h5>Collaboration</h5>
          </div>
          <div>
            <h6>Jake</h6>
          </div>
        </div>
        <div class="tag list-el tag-14 tag-2 tag-9  m-1">
          <div>
            <h4>OFF-TRACK</h4>
          </div>
          <div>
            <h5>Quality</h5>
          </div>
          <div>
            <h6>Jake</h6>
          </div>
        </div>
        <div class="tag list-el tag-15 tag-2 tag-10 m-1">
          <div>
            <h4>OFF-TRACK</h4>
          </div>
          <div>
            <h5>DO</h5>
          </div>
          <div>
            <h6>Adam</h6>
          </div>
        </div>
        <div class="tag list-el tag-16 tag-3 tag-11 m-1">
          <div>
            <h4>CRITICAL</h4>
          </div>
          <div>
            <h5>Social</h5>
          </div>
          <div>
            <h6>Mark</h6>
          </div>
        </div>
        <div class="tag list-el tag-17 tag-4 tag-12 m-1">
          <div>
            <h4>NOT-STARTED</h4>
          </div>
          <div>
            <h5>University</h5>
          </div>
          <div>
            <h6>Sam</h6>
          </div>
        </div>
        <div class="tag list-el tag-18 tag-4 tag-13 m-1">
          <div>
            <h4>ONHOLD</h4>
          </div>
          <div>
            <h5>Technology</h5>
          </div>
          <div>
            <h6>Sarah</h6>
          </div>
        </div>
      </div>
    </div>
  </div>

Collectives™ on Stack Overflow

Is there any way I can filter with multiple criteria using jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related