What is a promise in Javascript?

Question

zerokira

Asked: 2020-07-27 05:15:07 +0800 CST 2020-07-27 05:15:07 +0800 CST 2020-07-27 05:15:07 +0800 CST

How to make a filter?

772

I am trying to make a filter but I have no idea how to do it, I can receive suggestions, the filter works as follows:
When you click on one of the tags at the top, you should be able to display the content that has the TAG selected in the upper part, if one of the tags does not have the selected item in the upper part, it must be hidden.

PS: I have 2 items, each item has tags and should be able to filter/display according to the tags at the top

$(document).ready(function(){
  $('.content__item__filter span').on('click', function() {
    $(this).toggleClass('active__tag');
    var value = $(this).text().toLowerCase();
    $(".content__item__tag .content__tags").filter(function() {
      $('.content__item__tag').toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

.content__item__filter span.active__tag {
  background-color: #c6a067;
}
.content__body {
  padding: 20px;
}
.content__item__filter span {
  padding: 5px 10px;
  display: inline-block;
  margin: 5px;
  background-color: #697084;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="content__body">
  <div class="content__item__filter">
    <span>IoT</span>
    <span>Firmware</span>
    <span>RPI</span>
    <span>Blockchain</span>
    <span>GIMP</span>
  </div>

  <!-- Tag 1 -->
  <div class="content__item item content__item__tag">
    <h3 class="content__item__subtitle">Title 1. Lorem ipsum</h3>
    <div class="">
      <div class="tag__date">06 - 2014</div>
      <div class="content__item__description__tag">
        <div class="content__item__image">
          <h4>imagen</h4>
          <!--<img src="">-->
        </div>
        <p class="mt-0">
        Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
       
      </div>
      <div class="content__tags">
        <span>Tags: IoT, Lorem, ipsum, dolor, sit amet</span>
      </div>
    </div>
  </div>
  <!-- End Tag 1 -->

  <!-- Tag 2 -->
  <div class="content__item item content__item__tag">
    <h3 class="content__item__subtitle">Title 2. Consectetur adipiscing elit.</h3>
    <div class="">
      <div class="tag__date">09 - 2015</div>
      <div class="content__item__description__tag">
        <div class="content__item__image">
          <h4>imagen</h4>
          <!--<img src="">-->
        </div>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="content__tags">
        <span>Tags: Firmware, Lorem, ipsum, dolor, sit amet</span>
      </div>
    </div>
  </div>
  <!-- End Tag 2 -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2 Answers

Voted

Pablo Lozano · Answer 1 · 2020-07-27T08:13:39+08:00

I think all that HTML creates a bit of noise, so I'm going to try to do a simpler scenario, as a proof of concept:

We have elements that we want to show or not, in this case they will be some simple div. Let's make each have a set of labels:

$('.tab-body').each(function () {
  let tags=$(this).data('tags');
  console.log('Encontradas las etiquetas:',tags);
});

.tab-body {
  display: inline-block;
  width: 20%;
  height: 50px;
  color: white;
}
.red {  background-color: red;}
.blue {  background-color: blue;}
.green {  background-color: green;}
.black {  background-color: black;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-body red" data-tags="color red">Lorem ipsum ...</div>
<div class="tab-body blue" data-tags="color blue">Lorem ipsum ...</div>
<div class="tab-body green" data-tags="color green">Lorem ipsum ...</div>
<div class="tab-body black"data-tags="black">Lorem ipsum ...</div>

On the other hand, we can have a list of tags to select from:

$('.tag').click(function() {
  let elem=$(this);
  elem.toggleClass('active');
  console.log('Click en',elem.text());
});

span.tag {
  border: 1px solid lightgray;
  cursor: pointer;
}
span.active {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="tag">color</span>
<span class="tag">red</span>
<span class="tag">blue</span>
<span class="tag">green</span>
<span class="tag">black</span>

Now let's put it all together:

  let etiquetasActivas=[]; //variable global con las etiquetas seleccionadas
  
  $('.tag').click(function() {
    let elem=$(this);
    elem.toggleClass('active');
    let tag=elem.text();
    //Si está selecionada la quitamos, si no está la añadimos
    if (etiquetasActivas.includes(tag)) {
      etiquetasActivas = etiquetasActivas.filter(e=> e !==tag);
    } else {
      etiquetasActivas.push(tag);
    }
    //aplicamos los cambios de estado
    mostrarEtiquetas();
  });
  
  function mostrarEtiquetas() {
    //para cada elemento
    $('.tab-body').each(function() {
      let elem=$(this);
      //... obtenemos sus etiquetas
      let etiquetasElemento=elem.data('tags').split(' ');
      
      //si alguna está activa (o no hay etiquetas activas), se mostrará
      let mostrar= etiquetasActivas.length ==0 || 
          etiquetasActivas.some(etiq => etiquetasElemento.includes(etiq));
      if (mostrar) {
        elem.show();
      } else {
        elem.hide();
      }
    });
  }

.tab-body {
  display: inline-block;
  width: 20%;
  height: 50px;
  color: white;
}
.red {  background-color: red;}
.blue {  background-color: blue;}
.green {  background-color: green;}
.black {  background-color: black;}

span.tag {
  border: 1px solid lightgray;
  cursor: pointer;
}
span.active {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span class="tag">color</span>
  <span class="tag">red</span>
  <span class="tag">blue</span>
  <span class="tag">green</span>
  <span class="tag">black</span>
</div>
<div class="tab-body red" data-tags="color red">Lorem ipsum ...</div>
<div class="tab-body blue" data-tags="color blue">Lorem ipsum ...</div>
<div class="tab-body green" data-tags="color green">Lorem ipsum ...</div>
<div class="tab-body black" data-tags="black">Lorem ipsum ...</div>

In summary, the interesting thing here is to have a separate model from the view: we have a list of active tags that grows or decreases, and at each change the visible elements are updated by checking their related tags. With the use of attributes data-*it is easy to have data associated with a DOM element.

Bender Paisa · Answer 2 · 2020-07-27T05:53:50+08:00

What I came up with to solve the problem is to save arraythe values of the filters that are active, then iterate through those values and use the jQuery content selector with each value:

$(document).ready(function(){
  var arrayBusqueda = [];

  $('.content__item__filter span').on('click', function() {
    $(this).toggleClass('active__tag');
    var value = $(this).text();
    
    if($(this).hasClass('active__tag')){
      arrayBusqueda.push(value);
    }else{
      arrayBusqueda = arrayBusqueda.filter(function(elemento){
        return elemento != value;
      });
    }
    
    $(".content__item__tag").css('display', 'none');
    $.each(arrayBusqueda, function(index, dato){
      $(".content__tags:contains('"+ dato +"')").closest('.content__item__tag').toggle();
    });
  });
});

.content__item__filter span.active__tag {
  background-color: #c6a067;
}
.content__body {
  padding: 20px;
}
.content__item__filter span {
  padding: 5px 10px;
  display: inline-block;
  margin: 5px;
  background-color: #697084;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="content__body">
  <div class="content__item__filter">
    <span>IoT</span>
    <span>Firmware</span>
    <span>RPI</span>
    <span>Blockchain</span>
    <span>GIMP</span>
  </div>

  <!-- Tag 1 -->
  <div class="content__item item content__item__tag">
    <h3 class="content__item__subtitle">Title 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <div class="">
      <div class="tag__date">06 - 2014</div>
      <div class="content__item__description__tag">
        <div class="content__item__image">
          <h4>imagen</h4>
          <!--<img src="">-->
        </div>
        <p class="mt-0">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="content__tags">
        <span>Tags: IoT,Lorem,ipsum,dolor,sit amet</span>
      </div>
    </div>
  </div>
  <!-- End Tag 1 -->

  <!-- Tag 2 -->
  <div class="content__item item content__item__tag">
    <h3 class="content__item__subtitle">Title 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <div class="">
      <div class="tag__date">09 - 2015</div>
      <div class="content__item__description__tag">
        <div class="content__item__image">
          <h4>imagen</h4>
          <!--<img src="">-->
        </div>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="content__tags">
        <span>Tags: Firmware,Lorem,ipsum,dolor,sit amet</span>
      </div>
    </div>
  </div>
  <!-- End Tag 2 -->
</div>

How to make a filter?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?