循环 += 十进制变量的 javascript 有问题

Question

嗨，伙计们，我正在构建一个 for 循环，它基本上会生成一个动态选择选项表单。

一切正常，直到我尝试使用十进制值作为增量器。

例如，一个正常的循环是这样的：

for(i =0; i <= 10; i++){
// do some code
}

我面临的问题是，输入的所有内容都是动态的，包括可能需要用十进制数字递增的增量！

例如，它可能需要这个：

for(i =0; i <= 10.5;i+= 1.5){
//do some code
}

现在的事情是，一切都是动态的，所以实际的结束代码看起来像这样：

for(thei = 0; thei <= calchours; thei += +thetype){
}

如果"thetype"只是 1，一切正常 100%，但一旦它是 1.5，它只会循环几次然后退出。

这是我正在尝试执行的示例代码：

示例 HTML 代码：

<select class="form-control" id="bookingtype" name="bookingtype">
    <option value="1" selected="">Hourly Bookings</option>
    <option value="1.5">1 Hour Bookings With 30 Minute Intervals</option>
</select>
<select class="form-control" id="timefrom" name="timefrom">
    <option value="N/A" selected="">N/A</option>
    <option value="24">00:00</option>
    <option value="01">01:00</option>
    <option value="02">02:00</option>
    <option value="03">03:00</option>
    <option value="04">04:00</option>
    <option value="05">05:00</option>
    <option value="06">06:00</option>
    <option value="07">07:00</option>
    <option value="08">08:00</option>
    <option value="09" selected="selected">09:00</option>
    <option value="10">10:00</option>
    <option value="11">11:00</option>
    <option value="12">12:00</option>
    <option value="13">13:00</option>
    <option value="14">14:00</option>
    <option value="15">15:00</option>
    <option value="16">16:00</option>
    <option value="17">17:00</option>
    <option value="18">18:00</option>
    <option value="19">19:00</option>
    <option value="20">20:00</option>
    <option value="21">21:00</option>
    <option value="22">22:00</option>
    <option value="23">23:00</option>
</select>
<select class="form-control" id="timeto" name="timeto">
    <option value="N/A" selected="">N/A</option>
    <option value="24">00:00</option>
    <option value="00.5">00:30</option>
    <option value="01">01:00</option>
    <option value="01.5">01:30</option>
    <option value="02">02:00</option>
    <option value="02.5">02:30</option>
    <option value="03">03:00</option>
    <option value="03.5">03:30</option>
    <option value="04">04:00</option>
    <option value="04.5">04:30</option>
    <option value="05">05:00</option>
    <option value="05.5">05:30</option>
    <option value="06">06:00</option>
    <option value="06.5">06:30</option>
    <option value="07">07:00</option>
    <option value="07.5">07:30</option>
    <option value="08">08:00</option>
    <option value="08.5">08:30</option>
    <option value="09">09:00</option>
    <option value="09.5">09:30</option>
    <option value="10">10:00</option>
    <option value="10.5">10:30</option>
    <option value="11">11:00</option>
    <option value="11.5">11:30</option>
    <option value="12">12:00</option>
    <option value="12.5">12:30</option>
    <option value="13">13:00</option>
    <option value="13.5">13:30</option>
    <option value="14">14:00</option>
    <option value="14.5">14:30</option>
    <option value="15">15:00</option>
    <option value="15.5">15:30</option>
    <option value="16">16:00</option>
    <option value="16.5">16:30</option>
    <option value="17" selected="selected">17:00</option>
    <option value="17.5">17:30</option>
    <option value="18">18:00</option>
    <option value="18.5">18:30</option>
    <option value="19">19:00</option>
    <option value="19.5">19:30</option>
    <option value="20">20:00</option>
    <option value="20.5">20:30</option>
    <option value="21">21:00</option>
    <option value="21.5">21:30</option>
    <option value="22">22:00</option>
    <option value="22.5">22:30</option>
    <option value="23">23:00</option>
    <option value="23.5">23:30</option>
</select>
<input id="dinnerswitch" type="checkbox" value="1">
<div id="dinnerhourdiv" class="form-group">
    <label class="col-sm-3 control-label">Select Which Hour You Would Like To Have Off?</label>
    <div class="col-sm-2" id="showdinnerhours"></div>
</div>

示例 Javascript

jQuery(document).read(function(){
    jQuery('#dinnerswitch').change(function(){
        if(jQuery(this).is(':checked')) {
            jQuery(this).val(1);
        };
        if(jQuery(this).is(':checked') == false) {
            jQuery(this).val(0);
        };
        var dinnerid = jQuery('#dinnerswitch').val();
        var thestart = jQuery('#timefrom').val();
        var theend = jQuery('#timeto').val();
        var thetype = jQuery('#bookingtype').val();
        var thei = 0;
        var doi = '';
        var calchours = ((theend - thestart) / thetype);
        var calstart = '';
        var calend = '';
        var enterhours = '';
        var addingnumbers = 0;

        for(thei = 0; thei <= calchours; thei+= +thetype){
            calstart = +thestart + +thei;
            if(calstart < 12){
                calend = calstart + ' AM';
            } else {
                calend = calstart + ' PM';
            }
            calend = calend.replace('.5', ':30');
            enterhours += '<option value="' + addingnumbers + '">' + calend + '</option>';
            addingnumbers = +addingnumbers + 1;
        }
        if(dinnerid == 1){
            jQuery('#showdinnerhours').html('<select class="form-control" name="dinnerhour" id="dinnerhour">' + enterhours + '</select>');
            jQuery('#dinnerhourdiv').removeClass('hidden');
        } else {
            jQuery('#showdinnerhours').html('');
            jQuery('#dinnerhourdiv').addClass('hidden');
        }
    });
});

Answer 1

你的逻辑完全按照你告诉它去做的！

选择"1 小时预订，间隔 30 分钟"，从 9：00 开始，到 17：00 结束时，变量具有以下值：

thestart = 09
theend = 17
thetype = 1.5

因此

calchours = 5.333333或((17-9)/1.5)

您的循环从零开始，一直持续到calchours并递增 1.5 。因此，循环仅运行 4 次，为您提供 9：00、10：30、12 和 13：30 的动态选择条目。

这与"数学"完全一致，我是通过"调试"的魔力得出这些结论的。检查控制台：http://jsfiddle.net/7x82d66h/