javascript - 从输入字段中获取值，计算并显示总计

Question

我试图从输入字段中获取值，进行简单的计算并将答案显示到表单元素。

<script type="text/javascript">
    $(document).ready(function () {
        $("#number_ticket").change(function () {
            var adult = parseInt($(this).val()) * parseInt($('#price_adults').textContent);
            $('#total_price_adults').text(adult);
        });
    });
</script>

这是我的 HTML

<div class="st_adults_children">
    <span class="label">Adults</span>
    <div class="input-number-ticket">
        <input type="number" name="number_ticket" value="1" min="1"
                                                           max="10" placeholder="Number ticket of Adults"
                                                           id="number_ticket">
    </div>
    ×
    $<span class="price_adults" id="price_adults">{{$single->price}}</span>
    =
    <span class="total_price_adults" id="total_price_adults">$93</span>
</div>

我尝试从 $(this).val() 中删除 parseInt() ，因为该值已经是整数。我无法弄清楚这里出了什么问题。

Answer 1

问题出在 $('#price_adults').textContent 上。 jQuery 对象没有 textContent 属性，而 DOM 节点有。

jQuery方法是.text() :

var adult = parseInt($(this).val()) * parseInt($('#price_adults').text());

如果您想使用textContent，那么您可以访问 DOM 元素:

var adult = parseInt($(this).val()) * parseInt($('#price_adults')[0].textContent);
//                                                               ^^^ get the DOM node