Как применить класс css ко всем элементам <TD>между двумя щелчками на странице html?

Question

Я реализую веб-приложение-планировщик. Обычно пользователь нажимает на две даты, и будут выбраны все даты между двумя щелчками.

Это должно выглядеть следующим образом: Пользователь нажимает на день 5:

Затем он нажимает на день 7:

И день 6 также выбирается волшебным образом.

Приведенный выше пример прост в том, что три дня от на той же неделе. Но должна быть возможность выбрать несколько дней в выходные.

Первый выбор (до выходных):

Второй выбор (после выходных) , выбранный пользователем день 12):

Дни 9 и 10 - выходные дни, поэтому они не будут выбраны. Проблема здесь: как определить запрос для получения <td> элементов в строках таблицы над выбранным элементом?

До сих пор я придумал следующий jquery код:

 $(document).ready(function () {
    $("td.elegible").click(function () {
        $(this).children().filter("#event").toggleClass("event");
    });
});

Запрашиваемый элемент:

<tr>
  <td class="elegible">
   <span class="number">@day.Date.Day</span>
   <span id="event"/>
  </td>
 </tr>

Этот код переключает внешний вид зеленой полосы (обозначающей выбор), и с его помощью я могу выбрать дни 5,6 и 7, щелкнув все три дня. Но как я могу достичь sh, что, когда я просто нажимаю день 5 и день 7, выбирается также день 6? Более того: как мне предотвратить выбор всех дней до 5 дня, если до этого не было выбрано никаких других дней?

Я пробовал несколько функций обхода (parent (), children (), find (), filter () , вы называете это), но мне не удалось заставить это работать. Любой толчок в правильном направлении будет очень признателен.

Answer 1

Как я сказал в комментарии, этого будет довольно легко добиться, если вы будете отслеживать номер дня в HTML (например, как атрибут данных).

Ниже приведен простой пример . Позволяет выбрать только 1 дату и даты в обратном порядке.

$(function() {

  var d1, d2; // Days
  var selectStarted = false; // Flag

  $('.day').on('click', function() {

    if (selectStarted === false) {

      // Select first day
      d1 = $(this).data('day');

      // Set flag
      selectStarted = true;

    } else {

      // Select second day
      d2 = $(this).data('day');

      var diff = 0;
      var selected = [];

      // Calculate days between
      if (d2 >= d1) {

        diff = d2 - d1;
        selected = Array.from(new Array(diff + 1), (x, i) => i + d1);
        
      } else {

        diff = d1 - d2;
        selected = Array.from(new Array(diff + 1), (x, i) => i + d2);
      }

      // Add selected class to each selected day
      selected.forEach(function(day) {
        $('[data-day="' + day + '"]').addClass('selected');
      });

      // Reset flag
      selectStarted = false;
    }

  });

});

td {
  cursor: pointer;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

td.selected {
  background-color: yellow;
}

td.weekend {
  background-color: lightgray;
}

<table border="3" cellspacing="3" cellpadding="3">
  <tr>
    <td>Mon</td>
    <td>Tue</td>
    <td>Wed</td>
    <td>Thu</td>
    <td>Fri</td>
    <td>Sat</td>
    <td>Sun</td>
  </tr>
  <tr>
    <td class="day"></td>
    <td class="day"></td>
    <td class="day"></td>
    <td class="day"></td>
    <td class="day"></td>
    <td class="day"></td>
    <td class="day weekend" data-day="1">1</td>
  </tr>
  <tr>
    <td class="day" data-day="2">2</td>
    <td class="day" data-day="3">3</td>
    <td class="day" data-day="4">4</td>
    <td class="day" data-day="5">5</td>
    <td class="day" data-day="6">6</td>
    <td class="day weekend" data-day="7">7</td>
    <td class="day weekend" data-day="8">8</td>
  </tr>
  <tr>
    <td class="day" data-day="9">9</td>
    <td class="day" data-day="10">10</td>
    <td class="day" data-day="11">11</td>
    <td class="day" data-day="12">12</td>
    <td class="day" data-day="13">13</td>
    <td class="day weekend" data-day="14">14</td>
    <td class="day weekend" data-day="15">15</td>
  </tr>
  <tr>
    <td class="day" data-day="16">16</td>
    <td class="day" data-day="17">17</td>
    <td class="day" data-day="18">18</td>
    <td class="day" data-day="19">19</td>
    <td class="day" data-day="20">20</td>
    <td class="day weekend" data-day="21">21</td>
    <td class="day weekend" data-day="22">22</td>
  </tr>
  <tr>
    <td class="day" data-day="23">23</td>
    <td class="day" data-day="24">24</td>
    <td class="day" data-day="25">25</td>
    <td class="day" data-day="26">26</td>
    <td class="day" data-day="27">27</td>
    <td class="day weekend" data-day="28">28</td>
    <td class="day weekend" data-day="29">29</td>
  </tr>
  <tr>
    <td class="day" data-day="30">30</td>
    <td class="day" data-day="31">31</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Вы можете предотвратить добавление / изменение классов в выходные дни, используя что-то вроде: $('[data-day="' + day + '"]:not(.weekend)') .addClass ('selected') `