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

Question

我在完成下面的 jsfiddle 任务时遇到了一些麻烦。

jsfiddle link

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

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 和 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