vendredi 28 avril 2017

show and hide divs with multiple class names jquery checkboxes

I have many dives with multiple classes as

<div class="my-gallery">
  <div class="LargeFace Neutral Happy"></div>
  <div class="Sad Neutral Happy"></div>
  <div class="LargeFace Surprise Happy"></div>
  <div class="LargeFace Fear Happy"></div>
</div>

And I have multiple checkboxes which have all those values. e.g LargeFace or Happy and else.

<label class="with-label">
  <input id="c_b" type="checkbox" name="r1" value="Neutral" />Neutral
</label>
<label class="with-label">
  <input id="c_b" type="checkbox" name="r1" value="LargeFace">Large Face
</label>

Through this code I am getting all those checkbox values to an array

  $('.with-label').on "click", ->
    allVals = []
    $('.with-label :checked').each ->
      allVals.push $(this).val()
      return
    console.log allVals
    return

Right now I am really really struggling for filtering my divs on the basis of this array values. for example. User have selected multiple checkboxes and create an array as ["Happy", "Fear"]

I want to make something which will filter #my-gallery on the basis on that array. If there are 2 those values in an array then All those divs, which contain that classes should appear and other should disappear, So for other values? Is that possible? please help I am struggling with this for so long




Aucun commentaire:

Enregistrer un commentaire