Jquery多重onChange

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

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

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

与...since一样，它匹配所有.harga元素，因此设置所有元素的值。

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

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

您可能也希望在这一行中这样做：

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

...since，它将读取匹配.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文档中这样做。

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