编写一些面向对象的JavaScript

Question

在这里，我动态创建一个产品表单。

<?php 
//Prints out some form x times
for($i=1;$i<=10;$i++){productform($i);}

function productform($i){
print'<form><p id="res'.$i.'">
 <input type="text" class="date start" name="datumbegin" />
 <input type="text" class="time start" name="tijdbegin"/>
 <input type="text" class="date end" name="datumeind"/>
</p></form>';}
?>

如何在没有PHP的情况下使以下JavaScript工作OOP？

<?php
for($i=1;$i<=10;$i++){
print"
    <script>
        $('#res".$i.".time').timepicker({
            'disableTimeRanges':[['00:00','00:00'],['24:00','24:00']],
            'disableTouchKeyboard':true,
            'disableTextInput':true,
            'show2400':true,
            'step':30,
            'showDuration':true,
            'timeFormat':'H:i'
        });

        $('#res".$i.".date').datepicker({
            'disableTextInput':true,
            'disableTouchKeyboard':true,
            'format':'dd-mm-yyyy',
            'autoclose':true
        });

            $('#res".$i."').datepair();
    </script>";
}
?>

Answer 1

在您的页面中，将PHP代码替换为下面的JavaScript代码段。

<script>
for (var i=1; i<=10; i++) {
   $('#res' + i + '.time').timepicker({
        'disableTimeRanges':[['00:00','00:00'],['24:00','24:00']],
        'disableTouchKeyboard':true,
        'disableTextInput':true,
        'show2400':true,
        'step':30,
        'showDuration':true,
        'timeFormat':'H:i'
    });

    $('#res' +  i + '.date').datepicker({
        'disableTextInput':true,
        'disableTouchKeyboard':true,
        'format':'dd-mm-yyyy',
        'autoclose':true
    });

    $('#res' + i).datepair();
)
</script>