1

我正在使用 jquery 自定义对话框在网页上打印一组值。用户单击一个按钮并在自定义对话框中输入一组五个值，然后将这些值打印在网页上。

我想添加一个功能，如果用户愿意，可以选择打印另一组值。为此，给出了一个单选按钮。单击时会出现另一个按钮。单击此按钮时，用户将能够输入另一组五个这些值也将与初始值一起打印在网页上。

我面临的问题是我能够打印前五个值，但是当我单击第二个按钮输入第二组值时，弹出的自定义对话框仅包含一个值，即使我已经调用了用于打印第一组值的函数。cnt 变量没有按预期重新初始化，因为它从 5 开始，而不是按要求从 1 开始。

请帮忙..

HTML 代码..

          <!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>
          <script>
          $(document).ready(function ()
           {   
              $('#dialog').dialog({
              autoOpen: false,
              width: 250,
              height: 180,
              modal : true,
          resizable: false,
          show:"slow"
               });

      $('#dialog1').dialog({
              autoOpen: false,
              width: 250,
              height: 180,
              modal : true,
        resizable: false,
         show:"slow"
               });
        $('#put').click(function() {
            $( "#dialog" ).dialog( "open" );
              });

        $('#but1').click(function() {
            $( "#dialog" ).dialog( "open" );
             });
            });

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

            function close(){
             $( "#dialog" ).dialog( 'close' );
             }

             var cnt=1;
              function getPdata1() {
              var f = document.getElementById( 'pForm' );
              //var n1= f.name.value.toString();
              var n = $("input[name='name']").val();

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

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

        }

    function show()
         {
         document.getElementById("but1").style.visibility="visible";    

          }


         </script>
         </head>
         <body>

           <div>
             <button type="button" id="put" >Insert data</button>
             </div>

           <div id="dialog" title="Input Data">
           <form id="pForm" >
     name:<input type="text" name="name" width='50' height='100' maxlength="10" /><br> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="OK" onclick="getPdata1()" />
     <input type="button" value="cancel" onclick="getPdata( this.value )" />
      </form>
      </div>

    <input type="radio" name="option" value="11" id="but"onclick="show()">Set 2<br>


    <button type="button" id="but1" style="visibility:hidden" >Insert data 2</button>

     <div id="dialog1" title="Input Data">
     <form id="pForm1" >
    name: <input type="text" name="name1" width='50' height='100' maxlength="10"/><br>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="button" value="OK" onclick="getPdata1()" />
      <input type="button" value="cancel" onclick="getPdata( this.value )" />
      </form>
      </div>

      </body>
      </html>
4

1 回答 1

1

改变

$('#but1').click(function() {
    cnt = 1; //reset the count here
    $( "#dialog" ).dialog( "open" );
});

演示：plunker

于 2013-05-02T04:49:04.023 回答