我試圖從輸入字段中取值，做簡單的計算並顯示錶單元素的答案。從輸入字段中取值，計算並顯示總數

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

相關問題