Question

我有一个表格可以将产品价格输出到输入字段，具体取决于用户下拉菜单选项。这是一个提交最终计算价格的表格，因此价格必须保留为表格输入。

但是，我想隐藏输入并显示带有静态文本的范围，该范围会更新以反映输入中当前计算的内容。

更改输入本身的代码托管在其他位置，无法更改。我需要一种能够以某种方式捎带的解决方案。

我无法弄清楚这是怎么回事，但这就是我能想到的：

$("#priceField").change(function() {
    $('#price').html($(this).val());
});

#priceField是隐藏的输入。 #price是html范围。

我猜我每次输入更改时都需要以某种方式调用它？我不确定，但我肯定会摸不着头......

Answer 1

如果您在设置后调用或触发 $('#priceField').change()，这将有效：

$('#priceField').change(function () {
  // text is more appropriate
  $('#price').text($(this).val());
});

$('#applyBtn').click(function() {
  calcPrice();
  
  //Call the change manually
  $('#priceField').change();
});

$('#triggerBtn').click(function() {
  calcPrice();
  
  //Trigger the event
  $('#priceField').trigger('change');
});

function calcPrice() {
  $('#priceField').val(Math.random() * 10);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="priceField" type="hidden">
<button id="applyBtn" type="button">Call .change()</button>
<button id="triggerBtn" type="button">Trigger</button>
<span id="price"></span>

但这很容易出错，所以我强烈建议直接在计算价格的地方设置$('#price').text()值。如果没有看到更多代码，就无法真正做出任何例子。

使用jQuery将文本从输入字段镜像到html跨度？

1 个答案: