0

我已经制作了一个自定义的 jQuery-Ui 对话框。我希望该对话框被调用 12 次，即它应该输入 12 个值，并且每个值应该打印在不同的框中。应该使用 div 标签创建这些框。

所以最后点击一个按钮，对话框应该弹出 12 次来接受输入，这 12 个值应该打印在网页上的 12 个不同的框内，这些框必须使用 div 标签创建。

我已经能够使自定义对话框接受 12 个输入，但不能 2 在 12 个不同的 div 框中显示其内容..

请帮忙...

这是我的代码..

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Default functionality
            </title <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes /smoothness/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
            <!--<link rel="stylesheet" href="/resources/demos/style.css" />-->
            <script>
                $(document).ready(function() {
                    $('#dialog').dialog({
                        autoOpen: false,
                        width: 250,
                        height: 180,
                        modal: true,
                        show: "slow"
                    });
                    $('#put').click(function() {
                        $("#dialog").dialog("open");
                    });

                });


                function getPdata(arg) {
                    var f = document.getElementById('pForm');

                    close();
                    return;
                }
                var cnt = 1;

                function getPdata1() {
                    var f = document.getElementById('pForm');
                    var n = f.name.value;
                    var n1 = f.name.value.toString();
                    //var a = parseInt( f.age.value );                          
                    alert(n1.length);
                    if (n1.length > 0 && n1.length <= 10) {

                        //alert( 'name: ' + n + '\n age: ' + a );
                        alert('name : ' + n);
                    } else {
                        alert('the data you have enterd is not in limit.Please try again');
                        return;

                    }
                    close();
                    if (cnt <= 12) {
                        f.name.value = "";
                        $("#dialog").dialog('open');
                        cnt++;
                    }

                }

                function close() {
                    $("#dialog").dialog('close');
                }
            </script>
    </head>

    <body>
        <div>
            <button type="button" id="put" onclick="click()">Insert data</button>
        </div>
        <div id="dialog" title="Input Data">
            <form id="pForm">name:
                <input type="text" name="name" width='50' maxlength="10" />
                <br>
                <br>
                <!--age: <input type="text" name="age" />
                <br>
                <br>-->
                <input type="button" value="OK" onclick="getPdata1()" />
                <input type="button" value="cancel" onclick="getPdata( this.value )" />
            </form>
        </div>
    </body>

</html>
4

1 回答 1

0

使用 jquery， $('<div />'创建新的 div 元素，appendTo('body')将其添加到 body..我也将您的普通 javascript 更改为 jquery（例如获取输入值） jquery 是可读的、清晰的和更少的代码.. :) （因为你已经加载了jquery库..为什么不使用jquery..）

尝试这个

 function getPdata1() {
      var n = $("input[name='name']").val();

      alert(n.length);
      if (n.length > 0 && n.length <= 10) {
           $('<div />',{id:"div" + cnt }).html(n).appendTo('body');  //crated div will have an id as `div`+ count;
      } else {
            alert('the data you have enterd is not in limit.Please try again');
             return;

      }
        close();
        if (cnt <= 12) {
             f.name.value = "";
              $("#dialog").dialog('open');
              cnt++;
        }

    }
于 2013-04-26T05:04:42.057 回答