为什么这段代码只改变一个元素而不改变两者？答案

【问题标题】：Why is this code only changing one element and not both?为什么这段代码只改变一个元素而不改变两者？
【发布时间】：2019-07-12 15:37:54
【问题描述】：

我想根据一个输入字段更改 2 个元素，但 jquery 只更改一个元素中的文本，而不更改两个元素中的文本。

当我反转函数中元素的顺序时。 f.e.：#inCoin 是第一个，然后是 #receive_amount，它只改变 #inCoin 元素

<div class="form-row">
    <div class="form-group col-md-6">
        <div class="input-group">
            <input type="text" id="amount" name="amount" placeholder="How much do you want to {{$coin->add_type == 2 ? 'sell':'buy'}}" class="form-control" aria-describedby="inputGroupPrepend2" required>
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupPrepend2">{{$coin->currency->name}}</span>
            </div>
        </div>
    </div>

    <div class="form-group col-md-6">
        <div class="input-group">
            <input type="text" class="form-control" readonly id="inCoin" placeholder="In {{$coin->gateway->name}}" aria-describedby="inputGroupPrepend2" required>
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupPrepend2">{{$coin->gateway->currency}}</span>
            </div>
        </div>
    </div>
</div>
<div class="form-row">
    <div class="form-group col-md-12">
        <div class="input-group">
            <p>You will receive this amount: <span id="receive_amount"></span> {{$coin->gateway->currency}}</p>
        </div>
    </div>
</div>

$(document).ready(function() {
    var min = "{{$coin->min_amount}}";
    var max = "{{$coin->max_amount}}";
    var price = "{{$price}}";
    var charge = "{{$general->trx_charge}}";

    $(document).on('change keyup', "#amount", function() {
        var val = $(this).val();

        if (parseFloat(val) >= parseFloat(min) && parseFloat(val) <= parseFloat(max)) {
            $("#amount").css("background-color", "#87E9B9");
            $("#submit").css("display", "block");
            $("#receive_amount").text((parseFloat(val) / price) * ((100 - charge) / 100)).toFixed(6);
            $("#inCoin").val((parseFloat(val) / price) * ((100 - charge) / 100)).toFixed(6);

        } else {
            $("#amount").css("background-color", "#F59898");
            $("#submit").css("display", "none");
            $("#receive_amount").text(' ');
            $("#inCoin").val(' ');
        }

    });
});

我希望 #inCoin 和 #receive_amount 都会根据 #amount 发生变化，但实际上它只会改变 #receive_amount。

【问题讨论】：

标签： jquery html

【解决方案1】：

如果你检查你的控制台，你会看到这样的错误。

Uncaught TypeError: $(...).text(...).toFixed is not a function

将您的 toFixed(6) 移动到 val() 设置中，如下所示。

$(document).ready(function() {
  var min = "3";
  var max = "10";
  var price = "5";
  var charge = "3";

  $(document).on('change keyup', "#amount", function() {
    var val = $(this).val();

    if (parseFloat(val) >= parseFloat(min) && parseFloat(val) <= parseFloat(max)) {
      $("#amount").css("background-color", "#87E9B9");
      $("#submit").css("display", "block");
      $("#receive_amount").text((parseFloat(val) / price) * ((100 - charge) / 100).toFixed(6));
      $("#inCoin").val((parseFloat(val) / price) * ((100 - charge) / 100).toFixed(6));

    } else {
      $("#amount").css("background-color", "#F59898");
      $("#submit").css("display", "none");
      $("#receive_amount").text(' ');
      $("#inCoin").val(' ');
    }

  });
})

这违反了重复 ID 的规则。

<span class="input-group-text" id="inputGroupPrepend2">{{$coin->gateway->currency}}</span>

【讨论】：