需要帮助使用jquery将动态值放入动态字段吗

我正在制作一个简单的结账表单，在表单中，用户只需要输入产品代码、产品类型和他们想要购买的产品数量，然后使用jQuery根据他们想要购买的数量计算总价，并将其显示在total字段中

<div id="startcart">
    <div id="cart0">
        <div class="row">
        <div class="col-25">
          <input type="text" name="kodeproduk[]" value="" placeholder="Kode Produk" class="form-control">
        </div>
        <div class="col-25">
          <input type="text" name="tipeproduk[]" value="" placeholder="Tipe Handphone" class="form-control">
        </div>
        <div class="col-25">
          <input type="number" name="jumlah[]" placeholder="0" class="form-control jumlah" min="0"/>
        </div>
        <div class="col-25">
          <input type="number" name="total[]" value="" placeholder="Total" class="form-control total" readonly>
        </div>
        </div>    
    </div>
    <div id="cart1"></div>
</div>

问题是，现在总价只显示在第一个字段上，这是父字段，每当我尝试动态添加更多字段并更改数量时，总价值仅计算第一个字段的值，但计算的总数量是完美的

我尝试映射数组，数量数组工作正常，但总数组不工作 下面是我使用过的jQuery脚本

$(document).ready(function(){
   var i=1;
   $("#add_row").click(function(){
      b=i-1;
      var html = $(this).nextAll("#cart0").html();
      //console.log(html);
      //console.log(b);
      $('#cart'+i).html($('#cart'+b).html()).find('#cart'+b).html(i+1);
      $('#startcart').append('<div id="cart'+(i+1)+'"></div>');
      i++; 
   });
   $("#delete_row").click(function(){
      if(i>1){
        $("#cart"+(i-1)).html('');
        i--;
      }
      calc();
   });

   $('#startcart').on("keyup change", ".jumlah", function(){
      calc();
   });
   $('#tax').on('keyup change',function(){
      calc_total();
   });
});

function calc()
{   
    /*$("div#startcart").each(function() {
        //console.log($(this));
    });*/

    $('#startcart').each(function(i, element) {
        var html = $(this).html();
        console.log(html);
        var jumlah = $(".jumlah").map(function(){ return this.value}).get();
        console.log(jumlah);
        var total = $(".total").map(function(){ return this.value}).get();
        console.log(total);
        if(html!='')
        {
            var qty = $(".jumlah").val();
            //var qty = $(item).val();
            console.log("jumlah kuantiti "+qty);
            var price = 25000;
            //var totalprice = qty*price;
            //console.log(totalprice);
            $(".total").val(qty*price);

            calc_total();
        }
    });
}

function calc_total()
{
    total=0;
    jumlah=0;
    $('.total').each(function() {
        total += parseInt($(this).val());
    });
    $('.jumlah').each(function() {
        jumlah += parseInt($(this).val());
        console.log(jumlah);
    });
    var GrandTo = document.getElementById('GrandTotal');
    var GrandPro = document.getElementById('JumlahOrder');
    GrandTo.innerHTML = '<b>Rp '+total.toFixed(2)+'</b>';
    JumlahOrder.innerHTML = '<b> '+jumlah+'</b>';
}

$（文档）.ready（函数（）{
var i=1；
$（“#添加_行”）。单击（函数（）{
b=i-1；
var html=$（this.nextAll（#cart0”）.html（）；
//log（html）；
//控制台日志（b）；
$（'#cart'+i）.html（$（'#cart'+b.html（））.find（'#cart'+b.html（i+1）；
$（'#startcart'）。附加（''）；
i++；
});
$（“#删除_行”）。单击（函数（）{
如果（i>1）{
$（“#购物车”+（i-1））.html（“”）；
我--；
}
计算（）；
});
$（“#startcart”）.on（“keyup change”，“.jumlah”，function（）{
计算（）；
});
$（'#tax'）。on（'keyup change'，function（）{
计算总数（）；
});
});
函数计算（）
{   
/*$（“div#startcart”）。每个（函数（）{
//log（$（this））；
});*/
$（'#startcart'）。每个（函数（i，元素）{
var html=$（this.html（）；
log（html）；
var jumlah=$（“.jumlah”）.map（函数（）{returnthis.value}）.get（）；
控制台日志（jumlah）；
var total=$（“.total”）.map（函数（）{returnthis.value}）.get（）；
控制台日志（总计）；
如果（html！=''）
{
变量数量=$（“.jumlah”）.val（）；
//变量数量=$（项目）.val（）；
控制台日志（“jumlah Kuantti”+数量）；
var价格=25000；
//var totalprice=数量*价格；
//控制台日志（总价）；
美元（“.total”）.val（数量*价格）；
计算总数（）；
}
});
}
函数计算总计（）
{
总数=0；
朱姆拉=0；
$（'.total'）。每个（函数（）{
total+=parseInt（$（this.val（））；
});
$（'.jumlah'）。每个（函数（）{
jumlah+=parseInt（$（this.val（））；
控制台日志（jumlah）；
});
var GrandTo=document.getElementById（'GrandTotal'）；
var GrandPro=document.getElementById（'JumlahOrder'）；
GrandTo.innerHTML='Rp'+total.toFixed（2）+''；
JumlahOrder.innerHTML=''+jumlah+''；
}

如果需要复制问题，可以通过访问以下几个问题来完成：

$("#startcart").each(...

只有一个#startcart，因此无需

每个

它-您想要

每个

内部的

.cartN

，因此更改为：

$("#startcart>div").each(...

$(".jumlah", this)...

var jumlah = $(".jumlah", this).val()

下一个

将查看页面上的所有

.jumlah

，但您只需要上面循环的当前购物车中的一个，因此更改为：

$("#startcart>div").each(...

$(".jumlah", this)...

var jumlah = $(".jumlah", this).val()

不确定所有的

.map value get（）

用于什么，因此更改为：

$("#startcart>div").each(...

$(".jumlah", this)...

var jumlah = $(".jumlah", this).val()

不需要获取当前总数，但保留在

对设置总计进行相同的更改：

$(".total", this).val(qty*price);

不确定您是否需要

html=

部分，但还是离开了

没有像你说的那样查看计算总数

更新的小提琴：两个问题：

$("#startcart").each(...

只有一个#startcart，因此无需

每个

它-您想要

每个

内部的

.cartN

，因此更改为：

$("#startcart>div").each(...

$(".jumlah", this)...

var jumlah = $(".jumlah", this).val()

下一个

将查看页面上的所有

.jumlah

，但您只需要上面循环的当前购物车中的一个，因此更改为：

$("#startcart>div").each(...

$(".jumlah", this)...

var jumlah = $(".jumlah", this).val()

不确定所有的

.map value get（）

用于什么，因此更改为：

$("#startcart>div").each(...

$(".jumlah", this)...

var jumlah = $(".jumlah", this).val()

不需要获取当前总数，但保留在

对设置总计进行相同的更改：

$(".total", this).val(qty*price);

不确定您是否需要

html=

部分，但还是离开了

没有像你说的那样查看计算总数

---

更新的fiddle:

jQuery没有看到dom更改可能是原因。fixed fiddle:jQuery没有看到dom更改可能是原因。fixed fiddle:哇，工作得很好非常感谢您的帮助兄弟：）我可以知道这段代码的功能吗？根据我的逻辑，下面的代码将查看内部#startcart，对吗$（“#startcart>div”）。选择器中的每个（…

都表示直接子级。虽然

#startcart div

将在#startcart下方的所有级别找到所有div，但您不希望这样，因此

#startcart>div

与

$（“#startcart”）.children（）过滤器（“div”）

wow，工作得很好非常感谢你的帮助兄弟：）我可以知道这个代码的功能吗？根据我的逻辑，下面的代码将查看内部#startcart，对吗$（“#startcart>div”）。选择器中的每个（…

都意味着直接子级。虽然

#startcart div

将在#startcart下方的所有级别找到所有div，但您不希望这样，因此

#startcart>div

与

$（“#startcart”）.children（）相同。筛选（“div”）