Question

我有一个div，在那个div中，我有两个带有各自ID的输入字段，如下面所示：

<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
    $(document).ready(function(){
        $('#btn1').click(function(){
            var $div = $('div[id^="div"]:last');
            var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
            var $klon = $div.clone().prop('id', 'div'+num );
            $div.after( $klon);

        });
    }); 
    </script>
    <body>
    <button type = "button" id = "btn1" >submit </button>
    <div id = "div1">
    <h4><b>Trace 1 </b></h4>
      <form>
          <table>
              <tbody>
                 <tr>
                     <td><label>X Axis:  </label></td>                                               
                     <td><input type="text" name="t1_x_axis" id="t1_x_axis" size="50"></td>                                         
                  </tr>                                                                             
                  <tr>
                     <td><label>Y Axis:  </label></td>
                     <td><input type="text" name="t1_y_axis" id="t1_y_axis" size="50"></td>
                  </tr>
              </tbody>
          </table>
       </form>  
  </div> 

    </body>
</html>

我的查询是单击按钮时需要显示此div和表单，单击此按钮的次数div将显示一次{em> div中的不同ID和两个输入字段ID 也应更改。

例如，如果我单击按钮5次，它将显示5次，并且div ID和字段ID应当不同

预期输出：

 Trace 1
       X axis:   
       Y axis:
    Trace 1
       X axis: 
       Y axis:
    Trace 1
       X axis: 
       Y axis:
    Trace 1
       X axis: 
       Y axis:
    Trace 1
       X axis: 
       Y axis:

Answer 1

也许不是有史以来最好的解决方案...但是它可以解决您的问题。我使用了attr("id", "newId")

 $(document).ready(function(){
        $('#btn1').click(function(){
            var $div = $('div[id^="div"]:last');
            var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
            var $klon = $div.clone().prop('id', 'div'+num );

            $klon.find('input:first').attr("id", "xAxis_test");
            $klon.find('input:last').attr("id", "yAxis_test");

            $div.after( $klon);

        });
    });

或者：

        $klon.find("input[name='t1_x_axis']").attr("id", "xAxis_test");
        $klon.find("input[name='t1_y_axis']").attr("id", "xAxis_test");

单击按钮动态更改输入字段的ID

1 个答案: