Question

在我的情况下，每个人都选择了“PILIH PAKET JENIS HARGA”，然后“Harga”栏中的每一行都将填入相同的值

虽然我想要的是“PILIH PAKET JENIS HARGA”中的每一个选项来改变“Harga”中的行除了还改变每个对应于乘以“Qty”列的结果。

这里是我的代码：

<script type="text/javascript">

    $(document).ready(function(){

    // Tambah Row tabel
        $('#btn_paket_show').click(function(){          
            $('.tabel_paket tbody').append('<tr class="baris"><td style="width:50px; text-align:center; vertical-align:middle;"><input type="hidden" name="msg[]"><button name="btn_paket_hide[]" type="button" class="btn btn-danger btn-xs btn_paket_hide"><span class="glyphicon glyphicon-trash"></span></button></td><td><input type="text" class="form-control jml_paket" id="jml_paket" name="jml_paket[]" value"" placeholder="0"></td><td><select class="form-control nm_paket_hrg" id="nm_paket_hrg" name="nm_paket_hrg[]" ><option>PILIH JENIS PAKET HARGA</OPTION><?php foreach($list_paket as $s){?><option value="<?php echo ($s->id_item_paket_hrg."~".$s->nm_paket_hrg."~".$s->hrg);?>"><?php echo $s->hrg;?> @ <?php echo $s->nm_paket_hrg;?></option><?php }?></select></td><td><input class="form-control harga" id="harga[]" name="harga[]" type="text"></td></tr>');
        });

        $(document).on('change', '.nm_paket_hrg', function(){           
            var a_a = $(this).val();
            var a = a_a.split("~");
            var b = $('.jml_paket').val();
            var c = a[2]*b;

            $('.harga').val(c);
        });
</script>


<!-- TAMBAH PAKET -->
<button type="button" class="btn btn-info" id="btn_paket_show"><span class="glyphicon glyphicon-plus"> TAMBAH PAKET</button>
<table class="table table-striped table-bordered table-hover tabel_paket">
    <thead class="thead-2">
        <tr class="tr-2">
            <th class="th-2" style="width:50px; text-align:center;"><span class="glyphicon glyphicon-trash"></span></th>
            <th class="th-2" style="width:150px">QTY (Kg/Pcs)</th>
            <th class="th-2" style="width:300px">Nama Paket Harga</th>
            <th class="th-2" style="width:200px">Harga (Rp)</th>
        </tr>
    </thead>
    <tbody class="tbody-2">
    </tbody>
    <thead class="thead-2">
        <tr class="tr-2">
            <th class="th-2" colspan="3" style="text-align:right; vertical-align:middle">Total Harga (Rp)</th>
            <th class="th-2"><input class="form-control" id="total_harga" name="total_harga" type="text" placeholder="0"></th>
        </tr>
    </thead>
</table>

任何洗液？

Answer 1

如果您只想将.harga元素的值设置在与.nm_paket_hrg元素相同的行中，则需要限制此行：

$('.harga').val(c);

...因为原样，它匹配所有.harga元素，因此设置所有元素的值。

由于处理程序中的this引用了已更改的.nm_paket_hrg，您可以使用它导航到该行并从那里导航到.harga：

$(this).closest("tr").find(".harga").val(c);

您可能也希望为此行执行此操作：

var b = $('.jml_paket').val();

...因为那会读取匹配.jml_paket的第一个元素的值。

所以：

$(document).on('change', '.nm_paket_hrg', function() {
    var $this = $(this);                    // Reuse this
    var $row = $this.closest("tr");         // Find the row
    var a_a = $this.val();
    var a = a_a.split("~");
    var b = $row.find('.jml_paket').val();  // Just the one on this row
    var c = a[2] * b;

    $row.find(".harga").val(c);             // Just the one on this row
});

Answer 2

只需使用css类，就像在jquery docs

中一样

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

Jquery多个onChange

2 个答案: