Question

我有一个烧瓶模板，它创建了4个表单，其中包含一个数量输入框+标签，其中应该包含基于输入框中的值的价格*我从REST获得的json值： html片段：

<div class="mbr-overlay" style="opacity: 0.2; background-color: rgb(35, 35, 35);">
</div>

<div class="container">
    <div class="media-container-row">
        {% for currency in currencies %}
        <div class="card  col-12 col-md-6 col-lg-4">
            <div class="card-img">
                <p><img src="/assets/images/logo_{{ currency.name }}.png" height="128" width="128" /></p>
            </div>
            <div class="card-box align-center">
                <form id="{{ currency.unit }}" name="buy" class="{{ currency.unit }}" method="POST" action="/buy">
                    <p>
                        <!-- do not change the ID here -->
                        <input id="{{ currency.unit }}" name="amount" class="input" type="number" max="{{ currency.max }}" min="{{ currency.min }}" value="{{ currency.min }}" step="1" required /> {{ currency.buy_unit }}
                        <input id="currency" name="currency" type="hidden" value="{{ currency.name }}" />
                        <input id="unit" name="unit" type="hidden" value="{{ currency.unit }}" />
                        <input id="buy_unit" name="buy_unit" type="hidden" value="{{ currency.buy_unit }}" />
                    </p><p>
                        <div class="mbr-section-btn text-center">
                            <input id="submit" name="submit" class="btn btn-secondary display-4" type="submit" value="Koupit" />
                        </div>
                        <span class="price">Cena: {{ currency.price }}</span>
                    </p>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

jquery片段：

<script>
var formatter = new Intl.NumberFormat('cs-CZ', { style: 'decimal', maximumFractionDigits: 0, });

$(document).on('mouseenter mouseleave change input submit', '.input', function(){
  var par = $(this);
  var val = $(this).val();
  var idx = $(this).attr('id');

$.ajax({
  type: "GET",
  url: "/exchange_rates",
  dataType: 'json',
  success: function(response){
             var obj = response;
             par.closest('p').siblings('p').find('span.price').html(formatter.format((obj[idx] * val)/1000) + ' Kč');
             par.closest('p').siblings('p').find('span.price').css({"color": "green", "font-weight": "bold"});
             console.log("index:    " + idx);
             console.log("value:    " + val);
             console.log("obj[idx]: " + obj[idx]);
             console.log("sum:      " + (obj[idx] * val)/1000);
    }
  });             
});

$(document).ready(function(){
  $(".input").trigger("input");
});

我应该如何修改它，以便使用值和css样式正确更新值？

提前谢谢。

Answer 1

Elias Mason在jquery .on change doesn't trigger给出的答案足够鼓舞人心，虽然它仍然没有像我预期的那样对我有用，但我不想回答任何问题，因此我想结束这个话题

jquery - 根据json数据+来自inputbox

1 个答案: