使用两个嵌套的 for 循环在 JavaScript 和 jQuery 中动态分配 ID 和附加数据

Question

我在JSFIDDLE任务下方遇到一些麻烦。

JSFIDDLE链接

我想使用动态ID执行相同的功能。我尝试了很多方法，但没有任何作用。请不要建议更改基础架构。该页面已经设计了相同的结构。
我需要使用具有动态ID的两个嵌套循环来实现相同的功能。

html：

<div class="col-md-4" id="beforeDiv0">
  <div class="col-md-2" style="padding-right: 0px; padding-top: 5px;">
    <label for="Amount" style="font-weight:bold;">Amount:</label>
  </div>
  <div class="col-md-6">
    <input class="form-control" type="number" id="textboxId0" value="1000" />
  </div>
</div>
<br/><br/>
<div class="col-md-4" id="beforeDiv1">
  <div class="col-md-2" style="padding-right: 0px; padding-top: 5px;">
    <label for="Amount" style="font-weight:bold;">Amount:</label>
  </div>
  <div class="col-md-6">
    <input class="form-control" type="number" id="textboxId1" value="1000" />
  </div>
</div>

JavaScript＆amp;jQuery：

    $(document).ready(function(){
                   var newAmount = parseFloat(1000) + parseFloat(5);
        for(var id=0; id<3; id++){
            for (var i = 1; i < 3; i++) {
                var html = '<tr style="height:50px;">';
                html = html + '<td class="td-Amount" style="text-align: right; font-size: 15px; font-weight: bold;">';
                html = html + 'Original: '+ '<span  id="OrginalAmount' +  i + '">' + 1000 + '</span><br/>' + 'New: <span  id="Output' + id + "" +  i + '">' + newAmount + '</span></td>';
                html = html + '</tr>';
                $(html).insertAfter("#beforeDiv" + id);
                //var abc = id + "" + i;
                //var xyz = '#textboxId' + id;
                //var zyx = "Output"+id+""+i;
            }
        }
        var myArr = new Array();
        var myArr2 = new Array();
        for(var id=0; id<3; id++){
            var xyz = '#textboxId' + id;
            myArr[id] = id;
                for (var i = 1; i < 3; i++) {
                    myArr2[i] = i;
                    var calc = myArr[id] + "" + myArr2[i];
                    var zyx = "Output" + calc;
                    //below line is for dynamic id retrieval
                    /*
          $(xyz).on("click change paste keyup", function() {
                        var x = parseFloat(1000);
                        var y = parseFloat($(this).val());
                        var AmtChange = x + y;
                        document.getElementById(zyx).innerHTML = AmtChange;
                    });
          */
          $("#textboxId0").on("click change paste keyup", function() {
                        var x = parseFloat(1000);
                        var y = parseFloat($(this).val());
                        var AmtChange = x + y;
                        document.getElementById("Output01").innerHTML = AmtChange;
                      document.getElementById("Output02").innerHTML = AmtChange;
                    });
          $("#textboxId1").on("click change paste keyup", function() {
                        var x = parseFloat(1000);
                        var y = parseFloat($(this).val());
                        var AmtChange = x + y;
                        document.getElementById("Output11").innerHTML = AmtChange;
                      document.getElementById("Output12").innerHTML = AmtChange;
                    });
        }
    }
});

Answer 1

我查看了您的代码，并考虑了您的评论，如果我正确理解您，那么类似的事情就是您所追求的：

$('input[id^=textboxId]').on("click change paste keyup", function() {
    var id = $(this).attr('id');
    id = id.replace(/D/g,'');
    var x = parseFloat(1000);
    var y = parseFloat($(this).val());
    var AmtChange = x + y;
    /**
     * The following could not really be simplified, because
     * there are no defining data- attributes, or anything
     * to identify the table rows as belonging to the textbox.
     * When I tried to simplify the selection of "output" spans,
     * a span with id Output111 would have been matched by Output11
     * and Output1.
     */
    $('#beforeDiv' + id).nextUntil('br').each(function(i,el){
      $('span[id^=Output]', this).text(AmtChange);
    });
});

我在codepen上进行了测试：https：//codepen.io/skunkbad/pen/ayevlp