jQuery 显示单选按钮,如果 .length 大于 5
jQuery show radiobutton if .length is more than 5
我有一个日历,用户可以在其中选择2个日期。开始日期和结束日期。这两个日期之间的时间段获得"可预订范围"类
我想要的结果是,当有 5 个或更多类"可预订范围"时,会显示一个单选按钮,另一个按钮被隐藏
网页代码
未选择的字段示例,这是表的一部分。该表显示当月的每一天:
<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 类中犯了一些错误,我纠正了这些错误,但代码仍然无法正常工作。我没有收到任何控制台.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','');
}
});
});
以下控制台.log即使我选择一系列日期也返回 0
console.log(jQuery(".bookable-range").length);
赏金问题:所以我必须找到将上面的代码放在哪里(计算所选天数范围的地方)。但是由于这是我正在使用的插件中的代码,我不知道将其放在哪里。我认为它位于以下文件中,但我找不到正确的功能:
日期选择器.js我正在使用的插件的文件:http://pastebin.com/yvGzWVcj
预订表格.jshttp://pastebin.com/VgMUah2D
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)
});
每次在日历中单击时,您都可以检查是否有一定范围的天数。您可以更改 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','');
}
});
};
正如注释所暗示的那样,日历日已经有一个处理程序。若要避免同一事件有 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','');
}
}
- 使图像在单击时展开到不大于浏览器
- TypeError:在不兼容的接收器nodejs上调用了方法Uint8Array.length
- Array.length似乎不起作用;console.log则显示其他情况
- Jquery如何检查今天的时间大于使用给定时间
- cpu:phantom:page的比例可以大于1:1:1吗
- 为什么Float32Array.length的值总是3
- 正则表达式(JavaScript),用于创建数字必须大于x的数据验证
- Regex允许数字大于0.5
- JavaScript对象作为哈希?复杂性是否大于O(1)
- jQuery.length()速度含义
- scrypt.js失败,N大于2^14
- Javascript平等三重等于,但是大于和小于呢?
- JQuery `length`属性工作不正常.为什么?
- 可以't将.length属性与IronJS和ArrayObject一起使用
- RegEx接受小于-50.0或大于80.0的数字
- 链接的转换延迟大于内容
- 如果类中的数字大于0,请使用JavaScript更改CSS背景
- 在选择更改时显示大于/小于的隐藏字段集
- Jquery”;大于“;象征
- jQuery 显示单选按钮,如果 .length 大于 5