首次预订类Jquery后，HTML日历会删除选择

Question

此日历适用于日期范围预订。当用户选择第一个日期时，jquery正在从第一次点击到光标当前位置改变td背景（进行选择）。现在的问题是选择必须在第一次预订课程时停止。与.not('.booked')我这样做，它忽略了预定的日子，但仍然继续选择。感谢

$(document).ready(function() { //START of date range selection
$('td.days').click(function() {
      if ($("td.firstClick").length == 0) {
		$(this).addClass("firstClick");
	}
});
	
$('td.days').hover(function() {
	if ($("td.firstClick").length == 0) {
		$(this).addClass("selected");
		return;
	}
	$(this).addClass("secondClick");
	var tds = $('td.days');
	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;
	}).not('.booked').addClass("selected")
}, function() {
	if ($("td.firstClick").length == 0) {
		$(this).removeClass("selected");
		return;
	}
	$(this).removeClass("secondClick");
	var tds = $('td.days');
	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:not(.booked)', function() {
	$('.selected').addClass('reserved');
});
});  //END of date range selection	   		

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;
}
.booked{
  background:#ffdede;  
}

<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="days">1</td>
    <td class="days">2</td>
    <td class="days">3</td>
    <td class="days">4</td>
    <td class="days">5</td>
    <td class="days">6</td>
  </tr>
  <tr>
    <td class="days">7</td>
    <td class="days">8</td>
    <td class="days">9</td>
    <td class="days">10</td>
    <td class="days">11</td>
    <td class="days">12</td>
    <td class="days">13</td>
  </tr>
  <tr>
    <td class="days">14</td>
    <td class="days booked">15</td>
    <td class="days booked">16</td>
    <td class="days booked">17</td>
    <td class="days">18</td>
    <td class="days">19</td>
    <td class="days">20</td>
  </tr>
  <tr>
    <td class="days">21</td>
    <td class="days">22</td>
    <td class="days">23</td>
    <td class="days">24</td>
    <td class="days">25</td>
    <td class="days">26</td>
    <td class="days">27</td>
  </tr>
  <tr>
    <td class="days">28</td>
    <td class="days">29</td>
    <td class="days">30</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 1

好的，正如我在评论中提到的，您必须检查表中是否有.booked类的单元格。如果是，则检查currentIndex针对此单元格索引，如果currentIndex大于此单元格索引，则将currentIndex更改为具有.booked类的第一个单元格索引。

需要更改的JavaScript部分$('td.days').hover(function()将是这样的：

$('td.days').hover(function() {
    if ($("td.firstClick").length == 0) {
        $(this).addClass("selected");
        return;
    }
    $(this).addClass("secondClick");
    var tds = $('td.days');
    var firstClick = $(".firstClick");
    var firstClickIndex = tds.index(firstClick);
    var currentIndex = tds.index(this);
    if ($("td.booked").length > 0) {
        var tdsBooked = $('td.booked');
        tdsBooked = tdsBooked.filter(function() {
            var idx = tds.index(this);
            return idx > firstClickIndex;
        });
        var nextBooked = tdsBooked.first();
        var nextBookedIndex = tds.index(nextBooked);

        if((currentIndex > nextBookedIndex) && (firstClickIndex < nextBookedIndex))
            currentIndex = nextBookedIndex;
    }
    tds.filter(function() {
        var idx = tds.index(this);
        return idx >= firstClickIndex && idx <= currentIndex;
    }).not('.booked').addClass("selected")
}, function() {
    if ($("td.firstClick").length == 0) {
        $(this).removeClass("selected");
        return;
    }
    $(this).removeClass("secondClick");
    var tds = $('td.days');
    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")
});