Question

每当我点击微调器上的上/下按钮时，我都会尝试显示更新总价（数量*价格）。

HTML

<input type="text" name="price"  required id="price" class="form-control" />
<input type="text" value="0" name="quantity" id="quantity" required  style="width: 50px; height: 30px;">
<input type="text" name="total" id="total" required class="form-control" value="">

JS

$('#quantity').spinner({
        change : function(event, ui){
            var qty = ui.value;
            var price = parseFloat($('price').val());
            total = qty*price;
            $('#total').val(total);
        }
     });

Answer 1

由于价格是元素的QWidget window; window.show();，您需要在jquery中使用id来引用它

Answer 2

首先，您在#

中遗失了$('price')

其次，您应该使用this.value而不是ui.value。因为如果你添加console.log(ui)，你会注意到它是空的。你可以阅读它here

＆＃13;

$('#quantity').spinner({
  change: function(event, ui) {
    var qty = this.value;
    var price = parseFloat($('#price').val());
    var total = qty * price;
    $('#total').val(total);
  }
});

＆＃13;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="price" required id="price" class="form-control" />
<input type="text" value="0" name="quantity" id="quantity" required style="width: 50px; height: 30px;">
<input type="text" name="total" id="total" required class="form-control" value="">

＆＃13;

如果您想要在向上或向下按下时进行更新，请使用stop

＆＃13;

$('#quantity').spinner({
  stop: function(event, ui) {
    var qty = this.value;
    var price = parseFloat($('#price').val());
    var total = qty * price;
    $('#total').val(total);
  }
});

＆＃13;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="price" required id="price" class="form-control" />
<input type="text" value="0" name="quantity" id="quantity" required style="width: 50px; height: 30px;">
<input type="text" name="total" id="total" required class="form-control" value="">

＆＃13;

jQuery-ui Spinner更改为更新总数

2 个答案: