Как выбрать элементы между диапазонами в jQuery - PullRequest
Новая
       0

Как выбрать элементы между диапазонами в jQuery

1 голос
/ 05 апреля 2020

Можете ли вы взглянуть на эту демонстрацию и сообщить мне, как я могу удалить класс .d-none из элемента, который находится между двумя указанными числами? Например, я просто хочу показать .box от 1 до 6 и скрыть все остальные поля 

$("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>

Ответы [ 4 ]

2 голосов
/ 05 апреля 2020

Вы можете сделать это легко, используя метод jquery slice(). Метод slice() помогает нам сократить набор совпадающих элементов до подмножества, заданного диапазоном индексов, что нам здесь и нужно. 

$("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>
1 голос
/ 05 апреля 2020

В обычном 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 голос
/ 05 апреля 2020

Дополнительное решение, если вам нужно проверить содержимое <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>

Пояснения в коде!

0 голосов
/ 05 апреля 2020

Используйте .removeClass() на элементах вместе с slice(). Вызовите ваш селектор, затем нарежьте индекс элементов, добавив элементы, которые вы хотите показать, и затем removeClass('d-none').

. Также получите значения ваших элементов attr ('id'), нарежьте эту информацию и захватить фактические значения, установленные в кнопках. Отрегулируйте значение ключа, начиная с 0, с -1, и оно будет более динамичным c. 

$("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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...