Pouvez-vous jeter un œil à cette démo et me faire savoir comment supprimer la classe .d-none de l'élément situé entre deux nombres donnés? Par exemple, je veux juste montrer .box qui sont entre 1 et 6 et cacher toutes les autres cases

$("button").on("click", function(e) {
  var id = $(this).attr('id');

  if (id == 1) {
    $('.box').addClass('d-none');
    // Now only display boxes from  1 to 6
  }
  if (id == 2) {
    $('.box').addClass('d-none');
    // Now only display boxes from  10 to 26
  }
  if (id == 3) {
    $('.box').addClass('d-none');
    // Now only display boxes from  12 to 36
  }
});
.box {
  background: gold;
  height: 60px;
  width: 60px;
  color: black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin: 2px;
}

.d-none {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<br />
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>
1
Behseini 5 avril 2020 à 08:48

4 réponses

Meilleure réponse

Vous pouvez le faire facilement en utilisant la méthode jquery slice(). La méthode slice() nous aide à réduire l'ensemble des éléments appariés à un sous-ensemble spécifié par une plage d'indices, ce dont nous avons exactement besoin ici.

$("button").on("click", function(e) {
  var id = $(this).attr('id');
  $('.box').addClass('d-none');
  if (id == 1) {
    $('.box').slice(1,7).removeClass('d-none');
    // Now only display boxes from  1 to 6
  }
  if (id == 2) {
    $('.box').slice(10,27).removeClass('d-none');
    // Now only display boxes from  10 to 26
  }
  if (id == 3) {
    $('.box').slice(12,37).removeClass('d-none');
    // Now only display boxes from  12 to 36
  }
});
.box {
  background: gold;
  height: 60px;
  width: 60px;
  color: black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin: 2px;
}

.d-none {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<br />
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>
2
palaѕн 5 avril 2020 à 05:55

Une solution supplémentaire si vous devez vérifier le contenu <div>:

$("button").on("click", function(e) {
  var id = parseInt($(this).attr('id')); // get button id to decide

  // if you need to determine the range directly from the button content 
  // you should here extract the start and end value and use it 
  // afterwards for the if. In this case you can omit fixed ranges and 
  // the switch statement.
  // var start = parseInt($(this).html().split(" - ")[0]);
  // var end = parseInt($(this).html().split(" - ")[1]);

  $('.box').addClass('d-none'); // hide all divs
  var func = function() {
    var val = parseInt($(this).html()); // get div content value

    // use the button start and end values instead of the switch below
    // if(val >= start && val <= end) {
    //   $(this).removeClass('d-none');
    // }

    switch(id) {
      case 1:
       if(val >= 1 && val <= 6) { // show only ids for button 1
         $(this).removeClass('d-none');
       }
       break;
      case 2:
       if(val >= 10 && val <= 26) { // show only ids for button 2
         $(this).removeClass('d-none');
       }
       break;
      case 3:
       if(val >= 12 && val <= 36) { // show only ids for button 3
         $(this).removeClass('d-none');
       }
       break;
    }
  };

  $('.box').each(func);
});
.box {
  background: gold;
  height: 60px;
  width: 60px;
  color: black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin: 2px;
}

.d-none {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<br />
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>

Explication dans le code!

1
thex 5 avril 2020 à 06:46

En clair es20xx

{
  // helper to determine if number is between min and max
  const between = (number, min, max) => number >= min && number <= max;
  document.addEventListener("click", showSelection);

  function showSelection(evt) {
    // act only if clicked element contains [data-between] ('event delegation')
    if (evt.target.dataset.between) {
      // determine min and max based on [data-between]
      const minMax = evt.target.dataset.between.split(",").map(Number);
      [...document.querySelectorAll(".box")]
      .forEach(box => {
        // determine what to do with box.classList based on 
        // number between min and max
        const addOrRemove = between(+box.textContent, minMax[0], minMax[1]) ?
          "remove" : "add";
        // do it
        box.classList[addOrRemove]("d-none");
      });
    }
  }
}
.box {
  background: gold;
  height: 60px;
  width: 60px;
  color: black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin: 2px;
}

.d-none {
  display: none;
}
<button data-between="1,6">1 - 6</button>
<button data-between="10,26">10 - 26</button>
<button data-between="12,36">12 - 36</button>
<button data-between="0,40">all</button>
<br>
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>
1
KooiInc 5 avril 2020 à 07:51

Utilisez .removeClass() sur les éléments avec slice(). Appelez votre sélecteur, puis découpez l'index des éléments en ajoutant les éléments que vous souhaitez afficher, puis removeClass('d-none').

Obtenez également les valeurs de vos éléments attr ('id'), découpez ces informations et récupérez les valeurs réelles définies dans les boutons. Ajustez la valeur clé à partir de 0 avec -1 et c'est plus dynamique.

$("button").on("click", function(e) {
    var id = $(this).attr('id');
    var opt1 = $('#1').text().split(' - ');  
    var opt2 = $('#2').text().split(' - '); 
    var opt3 = $('#3').text().split(' - '); 

    if (id == 1) {
        $('.box').addClass('d-none');
        $('.box').slice(opt1[0]-1,opt1[1]).removeClass('d-none');
        }
    if (id == 2) {
        $('.box').addClass('d-none');
        $('.box').slice(opt2[0]-1,opt2[1]).removeClass('d-none');
    }
    if (id == 3) {
        $('.box').addClass('d-none');
        $('.box').slice(opt3[0]-1,opt3[1]).removeClass('d-none');
    }
    if (id == 4) {
        $('.box').removeClass('d-none');
    }
});
.box {
  background: gold;
  height: 60px;
  width: 60px;
  color: black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin: 2px;
}

.d-none {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<button id="4">Show All</button>

<br />
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>
0
dale landry 5 avril 2020 à 07:50