Question

我在该div中有一个div，我有两个输入字段和更新按钮，如下所示：

<button type = "button" id = "add-botton" >Add Element </button>
    <div id = "trace-div1" class = "trace">
    <h4><span>Trace 1</span></h4>
    <form>
        <table>
            <tbody>
                <tr>
                    <td><label>X Axis:  </label></td>
                    <td><input type="text" name="t_x_axis" class = "t_x_axis"  id="x_axis_t1" size="50"> 
                    </td>                                               
               </tr>                                                                            
               <tr>
                    <td><label>Y Axis:  </label></td>
                    <td><input type="text" name="t_y_axis" class = "t_y_axis" id="y_axis_t1" size="50"></td>
                    <td><button type = "button" name = "update-button-trace" class = "update-trace" id = 
                         "update-botton-trace1" onclick="updatebtn(this)">Update </button></td>
                </tr>
         </tbody>
        </table>
       </form>                              
    </div>
    <script>
    $(document).ready(function(){
        $('#add-botton').click(function(){
              var $div = $('div[id^="trace-div"]:last');
              var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
              var $trace1div = $div.clone(true).prop('id', 'trace-div'+num );
               $trace1div.find('span').text('Trace ' + num);
               $trace1div.find("input[name='t_x_axis']").attr("id", "x_axis_t"+num).val("");
               $trace1div.find("input[name='t_y_axis']").attr("id", "y_axis_t"+num).val("");
               $trace1div.find("button[name='update-button-trace']").attr("id", "update-button - 
             trace"+num);
              $div.after( $trace1div);


                });
        });
    function updatebtn(el){
            var id = $(el).attr('id');
    }
    }
</script>

在这里，我用diff.id多次克隆了div，我的问题是当我单击更新按钮时，我需要分别输入两个值。我尝试过这样，但是在这里我得到所有输入值，就像我添加了3个div一样，这些相应的所有值都在这里，每个div有2个输入字段：

<script>
 function updatebtn(el){
       var id = $(el).attr('id');
       $('input[type=text]:visible').each(function(){
                 console.log($(this).val());
        })
})
</script>

谢谢

Answer 1

您需要使用DOM遍历来查找与单击的按钮相关的input元素。考虑到您已经在使用jQuery，最简单的方法是将动态button元素与closest()和find()一起使用委托事件处理程序。

还值得注意的是，您在动态内容中使用id属性会导致很多问题，而不是解决的问题。我强烈建议您删除它们，并在所有元素上使用通用类。这样，您就不必在添加新内容时手动更新所有增量ID的麻烦。

尝试一下：

jQuery(function($) {
  var $traceContainer = $('#traces');

  $('#add-button').click(function() {
    var $div = $traceContainer.find('.trace:last').clone()
    $div.find("input[name='t_x_axis']").val("");
    $div.find("input[name='t_y_axis']").val("");
    $traceContainer.append($div);
    $div.find('span').text('Trace ' + ($div.index() + 1));
  });
  
  $traceContainer.on('click', '.update-trace', function() {
    var $container = $(this).closest('table');
    var xAxis = $container.find('input[name="t_x_axis"]').val();
    var yAxis = $container.find('input[name="t_y_axis"]').val();
    
    console.log(xAxis, yAxis);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add-button">Add Element</button>
<div id="traces">
  <div class="trace">
    <h4><span>Trace 1</span></h4>
    <form>
      <table>
        <tbody>
          <tr>
            <td><label>X Axis:</label></td>
            <td><input type="text" name="t_x_axis" class="t_x_axis" size="50">
            </td>
          </tr>
          <tr>
            <td><label>Y Axis:</label></td>
            <td><input type="text" name="t_y_axis" class="t_y_axis" size="50"></td>
            <td><button type="button" name="update-button-trace" class="update-trace">Update </button></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</div>

最后，请注意，我在每个div周围添加了一个.trace容器，以便附加它们并更轻松地检索它们的索引。另外请注意，每个form中的.trace似乎多余，可以删除。

Answer 2

您可以将查找值用作$div.find('.t_y_axis').val()

$(document).ready(function(){
        $('#add-botton').click(function(){
             
              var $div = $('div[id^="trace-div"]:last');
              var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
              var $trace1div = $div.clone(true).prop('id', 'trace-div'+num );
              
              
               $trace1div.find('span').text('Trace ' + num);
               $trace1div.find("input[name='t_x_axis']").attr("id", "x_axis_t"+num).val("");
               $trace1div.find("input[name='t_y_axis']").attr("id", "y_axis_t"+num).val("");
               $trace1div.find("button[name='update-button-trace']").attr("id", "update-button-trace"+num);
              $div.after( $trace1div);
              
              console.log( 'last t_y_axis => ' , $div.find('.t_y_axis').val());
              console.log( 'last t_x_axis => ' , $div.find('.t_x_axis').val());

        });
   });
    
    function updatebtn(el){
            var id = $(el).attr('id');
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type = "button" id = "add-botton" >Add Element </button>
    <div id = "trace-div1" class = "trace">
    <h4><span>Trace 1</span></h4>
    <form>
        <table>
            <tbody>
                <tr>
                    <td><label>X Axis:  </label></td>
                    <td><input type="text" name="t_x_axis" class = "t_x_axis"  id="x_axis_t1" size="50"> 
                    </td>                                               
               </tr>                                                                            
               <tr>
                    <td><label>Y Axis:  </label></td>
                    <td><input type="text" name="t_y_axis" class = "t_y_axis" id="y_axis_t1" size="50"></td>
                    <td><button type = "button" name = "update-button-trace" class = "update-trace" id = 
                         "update-botton-trace1" onclick="updatebtn(this)">Update </button></td>
                </tr>
         </tbody>
        </table>
       </form>                              
    </div>

Answer 3

尝试使用以下功能。由于两个输入文本框都有其ID，因此您可以使用相同的ID来获取输入的值。希望对您有帮助！

function loadAllModels() {
    let options =
    {
        loadAsHidden: true,
        globalOffset: { x: 0, y: 0, z: 0 }            
    };

    let promises = [];
    let length = storeys.length;
    let counter = 0;

    for (let storey of storeys) {
        let modelPromise = viewer.loadModel(storey.Svf, options);
        modelPromise.then((result) => {                
            counter++;
            console.log('counter: ' + counter);

            if (counter == length) {
                showHiddenModels();
            }
        });

        promises.push(modelPromise);
    }
}

function showHiddenModels() {
    let models = viewer.impl.modelQueue().getHiddenModels();

    for (let model of models) {
         viewer.showModel(model);
    }

    let extension = viewer.getExtension('Autodesk.ViewCubeUi');
    extension.setViewCube('[top/front]');     
}

Answer 4

您需要开发updatebtn（）。

 function updatebtn(el){
        var element = $(el),
            parent_table = element.parentsUntil('table');
        x_axis = parent_table.find('.t_x_axis').val();
        y_axis = parent_table.find('.t_y_axis').val(); 
}

我如何基于onclick函数获得两个输入字段值

4 个答案: