jQuery show radiobutton如果.length超过5

时间:2016-01-18 09:38:55

标签: javascript jquery html wordpress

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

预订-form.js http://pastebin.com/VgMUah2D

2 个答案:

答案 0 :(得分:1)

每次点击日历时,您都可以检查是否有天数。您可以更改css而不是使用hide&amp;展示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','');
        }
    });
};

正如评论所暗示的那样,日历日已有处理程序。为了避免为同一事件设置2个处理程序,您可以复制检查第一个处理程序内部范围的代码:

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','');
    }
}

答案 1 :(得分:1)

Datepicker有一个 onSelect 回调,理想情况下你会使用它。但它已在设置中定义,这是您在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)
         });