编写一些面向对象的 JavaScript答案

【问题标题】：Writing some object oriented JavaScript编写一些面向对象的 JavaScript
【发布时间】：2018-02-21 23:32:59
【问题描述】：

这里我动态地创建了一个产品表单。

<?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>";
}
?>

【问题讨论】：

如果没有 PHP，您必须将其放在 HTML 文件中或直接放在浏览器的开发人员控制台中。 developers.google.com/web/tools/chrome-devtools/console。但是您的示例似乎使用了 DOM 元素-因此您必须使用 HTML 文件将脚本放入其中-然后在浏览器中打开 HTML 文件。
你不需要 OOP。只需将第二个 for 循环放入您的 JavaScript 而不是 PHP。

标签： javascript oop

【解决方案1】：

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

<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>

【讨论】：