Javascript 如果.length大于5，则jQuery显示单选按钮

我有一个日历，用户可以选择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>

如果您需要更多html，请演示页面：

更新

答案中提供的当前代码。我在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 我正在使用的插件的文件：

预订表单.js

---

您可以在日历中每次单击时检查是否存在天数范围。您可以更改css，而不是使用JQuery的隐藏和显示功能：

JQuery(document).ready(function(){
    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-436-transport-2-1").css('display','none');
            JQuery(".addon-436-transport-2[]").css('display','');
        }
    });
};

正如评论所暗示的，已经有了日历日的处理程序。为了避免同一事件有两个处理程序，可以复制检查第一个处理程序内范围的代码：

function selectDay(day){

    //some code...

    if(JQuery('.bookable-range').length >= 5){
        console.log('range found!');
        JQuery(".addon-436-transport-2-1").css('display','none');
        JQuery(".addon-436-transport-2[]").css('display','');
    }
}

---

Datepicker有一个onSelect回调，理想情况下您可以使用它。但是它已经在设置中定义了，即您的pastebin文件中名为wc\u bookings\u date\u picker的设置。它被设置为选择\u日期\u触发器，一旦调用它，您就无法访问它，但您可以直接在文件中修改它并在其中添加逻辑

您还可以将其添加到此更改事件：

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

---

在控制台上搜索错误。张贴的代码很好。还要检查事件是否正确触发。控制台中没有错误，但我认为此操作从未触发？我不知道如何触发它，或者使用诸如console.log（）或alert（）之类的工具来检查代码是否正常工作，或者安装firebug并放置断点。另外，由于jQuery很好，您确定css很好吗？我建议使用$.hide（）和$.show（）而不是使用display:none创建自己的类。另外，你确定你的.addon-。。。实际上是存在的，不受打字错误和诸如此类的影响？@A.Wolff这是我问题的一部分，我不知道什么时候触发它。代码可能是正确的，但它不会触发您如何生成日历来选择日期？html显示op正在使用一个名为selectDay的函数，您可能应该更新您的答案以使用该函数，两个单击处理程序没有意义，但您的答案是正确的我的意思是，jquery可能不正确，我没有测试它，虽然从概念上来说答案是正确的，但你不同意这一点吗？我确信OP可以调试出一些javascript错误。谢谢你的回答，如果我在控制台中粘贴你的代码，它将显示一个日志，但我很抱歉，我的代码没有发生任何事情，我是否必须将它包装在document.ready（）或什么东西中？@Christophvh如果日志显示“range found！”，那么你的css/html编写不正确。是的，您应该将第一个代码（单击事件）包装在“JQuery（document）.ready（function（）{/*event binding here*/}”中。您可以使用console.log（JQuery（“.addon-436-transport-2-1”）.length）检查是否选择了某些内容；，如果为0，则表示JQuery找不到类为“addon-436-transport-2-1”的任何内容。非常好！非常感谢你！我一使用赏金，你就会得到赏金！：）

function selectDay(day){

    //some code...

    if(JQuery('.bookable-range').length >= 5){
        console.log('range found!');
        JQuery(".addon-436-transport-2-1").css('display','none');
        JQuery(".addon-436-transport-2[]").css('display','');
    }
}

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