HTML-Kalender Auswahl nach der ersten gebuchten Klasse entfernen Jquery

Question

Dieser Kalender ist für die Datumsbereichsbuchung gedacht. wenn der Benutzer das erste Datum auswählt, ändert jquery den td-Hintergrund (trifft die Auswahl) vom ersten Klick bis zur aktuellen Position des Cursors. Jetzt Problem ist, dass Auswahl muss aufhören, wenn erste Buchungsklasse trifft. mit .not('.booked') habe ich gemacht, dass es gebuchte tage ignoriert aber weiterhin nachwahl sowieso wählt.

Dank

$(document).ready(function() { //START of date range selection 
 
$('td.days').click(function() { 
 
     if ($("td.firstClick").length == 0) { 
 
\t \t $(this).addClass("firstClick"); 
 
\t } 
 
}); 
 
\t 
 
$('td.days').hover(function() { 
 
\t if ($("td.firstClick").length == 0) { 
 
\t \t $(this).addClass("selected"); 
 
\t \t return; 
 
\t } 
 
\t $(this).addClass("secondClick"); 
 
\t var tds = $('td.days'); 
 
\t var firstClick = $(".firstClick"); 
 
\t var firstClickIndex = tds.index(firstClick); 
 
\t var currentIndex = tds.index(this); 
 
\t tds.filter(function() { 
 
\t \t var idx = tds.index(this); 
 
\t \t return idx >= firstClickIndex && idx <= currentIndex; 
 
\t }).not('.booked').addClass("selected") 
 
}, function() { 
 
\t if ($("td.firstClick").length == 0) { 
 
\t \t $(this).removeClass("selected"); 
 
\t \t return; 
 
\t } 
 
\t $(this).removeClass("secondClick"); 
 
\t var tds = $('td.days'); 
 
\t var firstClick = $(".firstClick"); 
 
\t var firstClickIndex = tds.index(firstClick); 
 
\t var currentIndex = tds.index(this); 
 
\t tds.filter(function() { 
 
\t \t var idx = tds.index(this); 
 
\t \t return idx >= firstClickIndex && idx <= currentIndex; 
 
\t }).removeClass("selected") 
 
}); 
 

 
$('table').on('click', 'td.secondClick:not(.booked)', function() { 
 
\t $('.selected').addClass('reserved'); 
 
}); 
 
}); //END of date range selection \t  \t \t

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

OK, wie ich in meinem Kommentar erwähnt, müssen Sie prüfen, ob eine Zelle in der Tabelle mit der .booked Klasse. Wenn ja, dann überprüfen Sie die currentIndex gegen diesen Zellindex, wenn currentIndex größer als diese Zelle Index war, dann ändern Sie die currentIndex in die erste Zelle Index mit .booked Klasse.

$('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") 
});