Question

我有3个div具有相同的类（.items），并且每个div都有1个选择输入（.price），文本字段（.quantity）和文本字段（.total）（总计：3输入字段）

我想要实现的是当任何选择字段.price被更改时，我想获取它的值，然后将其与.quantity的值相乘，然后更新价值.total。

当我更改选择输入.total并且我希望它只更新其div .price时，我已更新所有div的所有.total代码我怎么能这样做？

希望它有意义。

<script>
$(document).ready(function() {

var year_amount;
var quantity;
var total;

$(".x_year").change(function(){
    year_amount = this.value;
    $(".x_total").val(year_amount);
});


$(".x_quantity").change(function(){
    quantity = this.value;
    total = year_amount * quantity;

    $('.x_total').val(total);

});

});
</script>




<div class="container">
    <p>
    <select name="year" id="year" class="x_year">
        <option value="100">100</option>
        <option value="222">222</option>
        <option value="452">452</option>
    </select>
    </p>

    <p><input type="text" name="amount" class="x_amount" id="amount" disabled /></p>
    <p><input type="text" name="quantity" class="x_quantity" id="quantity" value="" /></p>
    <p><input type="text" name="total" class="x_total" id="total" value="" disabled /></p>
</div>

<div class="container">
    <p>
    <select name="year" id="year" class="x_year">
        <option value="100">100</option>
        <option value="222">222</option>
        <option value="452">452</option>
    </select>
    </p>

    <p><input type="text" name="amount" class="x_amount" id="amount" disabled /></p>
    <p><input type="text" name="quantity" class="x_quantity" id="quantity" value="" /></p>
    <p><input type="text" name="total" class="x_total" id="total" value="" disabled /></p>
</div>

Answer 1

用以下代码替换您的代码：

$(".x_year, .x_quantity").change(function(){
    $(this).closest(".container").find(".x_total").val(this.value);
});

这将从已更改的内容中找到父.container对象，然后在该容器中查找.x_total对象并设置其值。这个单独的JS块适用于x_year和x_quantity。你可以通过给这两个对象提供相同的类x_autoTotal（记住，你可以在一个对象上有多个类）然后使用这个代码来使它变得更简单：

$(".x_autoTotal").change(function(){
    $(this).closest(".container").find(".x_total").val(this.value);
});

如何使用jQuery仅更新其父类的总金额

1 个答案: