HTML：

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

Answer 2

有几种方法可以改善你的成就：

首先 - 当你在javascript中工作时，查找并尽可能地缓存元素和值。例如，如果您知道在加载页面后票证价格不会更改，您可以查找一次该号码，然后重新使用它。基本上，如果您不需要，您不应该去DOM中查找事件处理程序中的元素或值。

第二个提示 - 您可以使用一些简单的CSS格式化价格，这样您的元素就可以成为直接价值，而且您不必担心在＆x 39; $ x.xx＆之间来回切换＃39;和＆＃39; x.xx＆＃39;。

第三，您可能不希望货币parseInt，因为它们可以包含美分。 parseFloat会保留你的分数，但如果你能控制价值，你可能不需要它。

试试这个（fiddle）

HTML：

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

JS

//Cache the elements you're interested in
var ticketPrice = $('#price_adults').html(),
        totalElement = $('#total_price_adults'),
    quantityInput = $('input[name=number_ticket]');

//Watch change as well as click/keyup (improves the responsiveness of the number input controls)
quantityInput.on('change click keyup', function () {
  totalElement.html(quantityInput.val() * ticketPrice);
});

//Initialise on ready
quantityInput.trigger('change');

CSS：

.price::before {
  content: '$';
}

Answer 3

您可以使用.html（）代替.text（）属性。

喜欢，parseInt（$（＆＃39; #price_adults＆＃39;）。html（））;

希望这会对你有所帮助。

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

3 个答案:

HTML：

JS

CSS：