jquery - HTML 日历使用 Jquery 选择日期范围

Question

我有日历 html 表，希望第一次单击选择开始日期，第二次单击选择结束日期。在我单击结束日期之前，它必须显示从开始日期到光标位置的范围。如果我选择的 tds 在同一个 tr 中，所有这些都有效。请帮助我在 ant tr 中选择 tds。谢谢

$(document).ready(function() {
  $('td.day').click(function() {
    if ($("td.firstClick").length == 0) {
      $(this).addClass("firstClick");
    }
  });
  $('td.day').hover(function() {
    $(this).addClass("secondClick");
    $("td.firstClick").nextUntil(this).addClass("selected");
  });

  $('td.day').mouseleave(function() {
    $(this).removeClass("secondClick");
    $("td.firstClick").nextUntil(this).removeClass("selected");
  });

  $('td.secondClick').click(function() {
    $('.selected').addClass('reserved');
  });
});

table {
  border-collapse: collapse;
}
table tr td {
  width: 14%;
}
table tr td:hover {
  cursor: pointer;
}
.firstClick {
  background: green;
}
.selected {
  background: lightgreen;
}
.reserved {
  background: red !important;
}
.secondClick {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td colspan="7"><b>2016</b>
    </td>
  </tr>
  <tr>
    <td colspan="7"><i>November</i>
    </td>
  </tr>
  <tr>
    <th>mon</th>
    <th>tue</th>
    <th>wed</th>
    <th>thu</th>
    <th>fri</th>
    <th>sat</th>
    <th>sun</th>
  </tr>
  <tr>
    <td></td>
    <td class="day">1</td>
    <td class="day">2</td>
    <td class="day">3</td>
    <td class="day">4</td>
    <td class="day">5</td>
    <td class="day">6</td>
  </tr>
  <tr>
    <td class="day">7</td>
    <td class="day">8</td>
    <td class="day">9</td>
    <td class="day">10</td>
    <td class="day">11</td>
    <td class="day">12</td>
    <td class="day">13</td>
  </tr>
  <tr>
    <td class="day">14</td>
    <td class="day">15</td>
    <td class="day">16</td>
    <td class="day">17</td>
    <td class="day">18</td>
    <td class="day">19</td>
    <td class="day">20</td>
  </tr>
  <tr>
    <td class="day">21</td>
    <td class="day">22</td>
    <td class="day">23</td>
    <td class="day">24</td>
    <td class="day">25</td>
    <td class="day">26</td>
    <td class="day">27</td>
  </tr>
  <tr>
    <td class="day">28</td>
    <td class="day">29</td>
    <td class="day">30</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 1

您可以使用 .index()连同 .filter()获取目标元素。

//Cache elements 
var tds = $('td.day'); 
var firstClick = $(".firstClick");

//Get of various elements
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);

//Filter element where index is greater that firstClick  and less-than equal to clicked element index
var filteredElements = tds.filter(function() {
  var idx = tds.index(this);
  return idx >= firstClickIndex && idx <= currentIndex;
});

//Perform the desired operation
filteredElements.addClass("selected")

使用Event Delegation在生成元素操作选择器时(如删除和添加类)。

$('table').on('click', 'td.secondClick', function() {
    $('.selected').addClass('reserved');
});

$(document).ready(function() {
  $('td.day').click(function() {
    if ($("td.firstClick").length == 0) {
      $(this).addClass("firstClick");
    }
  });

  $('td.day').hover(function() {
    if ($("td.firstClick").length == 0) {
      $(this).addClass("selected");
      return;
    }
    
    $(this).addClass("secondClick");
    var tds = $('td.day');
    var firstClick = $(".firstClick");
    var firstClickIndex = tds.index(firstClick);
    var currentIndex = tds.index(this);
    tds.filter(function() {
      var idx = tds.index(this);
      return idx >= firstClickIndex && idx <= currentIndex;
    }).addClass("selected")
  }, function() {
    if ($("td.firstClick").length == 0) {
      $(this).removeClass("selected");
      return;
    }

    $(this).removeClass("secondClick");
    var tds = $('td.day');
    var firstClick = $(".firstClick");
    var firstClickIndex = tds.index(firstClick);
    var currentIndex = tds.index(this);
    tds.filter(function() {
      var idx = tds.index(this);
      return idx >= firstClickIndex && idx <= currentIndex;
    }).removeClass("selected")
  });

  $('table').on('click', 'td.secondClick', function() {
    $('.selected').addClass('reserved');
  });
});

table {
  border-collapse: collapse;
}
table tr td {
  width: 14%;
}
table tr td:hover {
  cursor: pointer;
}
.firstClick {
  background: green;
}
.selected {
  background: lightgreen;
}
.reserved {
  background: red !important;
}
.secondClick {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td colspan="7"><b>2016</b>
    </td>
  </tr>
  <tr>
    <td colspan="7"><i>November</i>
    </td>
  </tr>
  <tr>
    <th>mon</th>
    <th>tue</th>
    <th>wed</th>
    <th>thu</th>
    <th>fri</th>
    <th>sat</th>
    <th>sun</th>
  </tr>
  <tr>
    <td></td>
    <td class="day">1</td>
    <td class="day">2</td>
    <td class="day">3</td>
    <td class="day">4</td>
    <td class="day">5</td>
    <td class="day">6</td>
  </tr>
  <tr>
    <td class="day">7</td>
    <td class="day">8</td>
    <td class="day">9</td>
    <td class="day">10</td>
    <td class="day">11</td>
    <td class="day">12</td>
    <td class="day">13</td>
  </tr>
  <tr>
    <td class="day">14</td>
    <td class="day">15</td>
    <td class="day">16</td>
    <td class="day">17</td>
    <td class="day">18</td>
    <td class="day">19</td>
    <td class="day">20</td>
  </tr>
  <tr>
    <td class="day">21</td>
    <td class="day">22</td>
    <td class="day">23</td>
    <td class="day">24</td>
    <td class="day">25</td>
    <td class="day">26</td>
    <td class="day">27</td>
  </tr>
  <tr>
    <td class="day">28</td>
    <td class="day">29</td>
    <td class="day">30</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>