javascript - 如果 .length 大于 5，jQuery 显示单选按钮

Question

我有一个日历，用户可以在其中选择 2 个日期。开始日期和结束日期。这两个日期之间的时间段接收“可预订范围”类

我想要的结果是，当有 5 个或更多类“可预订范围”时，会显示一个单选按钮并隐藏另一个单选按钮

HTML 代码

未选中字段的示例，这是表格的一部分。该表显示当月的每一天:

<td class=" bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2016"><a class="ui-state-default" href="#">25</a></td>

属于开始日期和结束日期范围的一部分的字段示例

<td class=" bookable-range" data-handler="selectDay" data-event="click" data-month="0" data-year="2016"><a class="ui-state-default" href="#">28</a></td>

我的 javascript 代码无法正常工作，我必须在发生第二次点击时触发此代码，但我不确定该怎么做。

var nights  = jQuery(".bookable-range").length;
if(nights >= 5){
  jQuery(".addon-436-transport-2-1").addClass("hidethis");
  jQuery(".addon-436-transport-2[]").addClass("active");
}

如果您需要更多 html，页面演示:http://riado.christophvh.be/nl/rooms/alaouite-kamer/

更新

答案中提供的当前代码。我在我的 css 类中犯了一些错误，我更正了这些错误，但代码仍然无法正常工作。我没有收到任何 console.log() 消息。

jQuery(document).ready(function(){
  jQuery(".addon-wrap-436-transport-2-1").css('display', 'none');
  console.log(jQuery(".bookable-range").length);

  jQuery('table.ui-datepicker-calendar tbody tr td').click(function(){
      console.log('day click');
      if(jQuery('.bookable-range').length >= 5){
          console.log('range found!');
          jQuery(".addon-wrap-436-transport-2-0").css('display','none');
          jQuery(".addon-wrap-436-transport-2-1").css('display','');
      }
  });
});

即使我选择了一个日期范围，以下 console.log 也会返回 0

console.log(jQuery(".bookable-range").length);

赏金问题:所以我必须找到把上面的代码放在哪里(计算所选日期范围的地方)。但是因为这是我正在使用的插件的代码，所以我不知道把它放在哪里。我认为它位于以下文件中，但我找不到正确的函数:

Datepicker.js我正在使用的插件文件: http://pastebin.com/yvGzWVcj

Booking-form.js http://pastebin.com/VgMUah2D

Answer 1

Datepicker 有一个 onSelect 回调，理想情况下您会使用它。但它已经在 settings 中定义，在您的 pastebin 文件中，名为 wc_bookings_date_picker。它设置为 select_date_trigger，一旦被调用您将无法访问它，但您可以直接在文件中修改它并在其中添加您的逻辑。

您也可以将其添加到此更改事件中:

    jQuery( 'body' ).on( 'change', 
        '#wc_bookings_field_duration, #wc_bookings_field_resource', 
         function(){
             console.log(jQuery('.bookable-range').length)
         });