Question

我想基于一个输入字段更改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。

Answer 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>

为什么此代码仅更改一个元素，而不同时更改两个元素？

1 个答案: