我试图从输入字段中取值，做简单的计算并显示表单元素的答案。从输入字段中取值，计算并显示总数

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

我试图从$删除parseInt函数（）（本）.VAL（），因为该值已经是整数。我无法弄清楚这里有什么问题。

来源

2017-06-13 Azima

有几个方法可以提高你已经什么得到：

首先 - 当你在JavaScript工作，查找和缓存元素和值，你可以。例如，如果您知道在加载页面后票价不会改变，您可以查找一次该号码，然后重新使用它。基本上，如果你不需要，你不应该去DOM查找事件处理程序中的元素或值。第二个技巧 - 您可以使用一些简单的CSS来格式化价格，以便您的元素可以是直接值，并且您不必担心在'$ x.xx'和'x之间来回转换.XX”。

第三，您可能不希望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: '$'; 
}

来源

2017-06-13 10:27:18 Beejamin

问题出在$('#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

来源

2017-06-13 10:09:15 MrCode

使用.text（）仍然给我'NaN'结果..我们是否需要解析结果？ – Azima

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

like，parseInt（$（'＃price_adults'）。html（））;

希望这会帮助你。

来源

2017-06-13 10:29:00

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

回答

HTML：

JS

CSS：

相关问题