计算折扣价格不显示为一个数字在jquery

Calculation for discount price not showing up as a number in jquery?

本文关键字：一个 数字 jquery 折扣价 显示 计算      更新时间：2023-09-26

我正在尝试制作一个表单，根据所选择的日期和时间更新票价，在某些日子将打折，而其他日子则不会。

就门票定价而言，我一直使用HTML来存储和操作这些值，如下所示:

<tr>
    <td>Adult</td>
        <td>
            <select class="qty" name="SA">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td>
           <input type="text" value="18.00" class="price" readonly>
        </td>
        <td align="center">
            <span class="amount">$0.00</span>
        </td>
    </tr>

工作原理

  • 根据用户选择的下拉选项选择数量value。

  • 数量值然后乘以价格，该价格存储在<input> HTML中的value中，在本例中为18。

  • <span>然后更新结果，显示小计价格。

  • 注意:我有多个<tr>的部分是相同的这一个

用于计算的JS/jquery 

    //price of seating
function calculatePrice() {
    var time = $("#whichSession").val(); // sets time to value
    var day = $("#whichDay").val(); // sets day to value
    var sum = 0;
    $('#bookingTable > tbody  > tr').each(function () {
        var qty = $(this).find('option:selected').val();
        var price = $(this).find('.price').val();
        var amount = (qty * price)
        sum += amount;
        $(this).find('.amount').text('$' + amount.toFixed(2));
    });
    //just update the total to sum  
    $('#totalprice').val(sum.toFixed(2));
}

另一个用户建议我创建一个新函数，实时更新价格的value，以便它可以获得适当的折扣值。

JS/jquery用于计算折扣价格

// calls get price function on day change
$('.qty').change(function () {
    getPrices();
});
// sets value of price based on day and time
function getPrices ( day, time ) {  
  if ( day=='mon' || day == 'tue' || time=='1pm' ) {
    prices = {SA:12, SP:10, SC:8, FA:25, FC:20, B1:20, B2:20, B3:20}
  } else {
    prices = {SA:18, SP:15, SC:12, FA:30, FC:25, B1:30, B2:30, B3:30}
  }
  return prices;
}

我的问题

当我使用alert来显示它实际改变的值时，它似乎是正确的。然而，它在span中打印为'$NaN'，这意味着显示每张票的小计金额。

JSFiddle

我创建了一个小提琴，这样你们就可以看到整个东西是如何工作的。请原谅，如果任何代码是可疑的。当它在我的网站上时，效果会好得多。

很抱歉写了这么久。我只是想确保我把我的问题说得非常清楚。如果有什么不清楚的地方，请告诉我，我会尽力澄清的。

提前感谢!

问题是你的函数getPrices()返回一个JavaScript对象，而不是一个数字。

如果你这样做了:

var amount = (qty * prices.SP);

代替:

var amount = (qty * price);

您的金额是一个数字，您可以对它进行数学运算

似乎需要使用特定的人类型来访问正确的价格。您可能需要读取它的值，如下所示:

$('#bookingTable > tbody  > tr').each(function () {
  var type= $(this).find('select:first').attr('name');
  var qty = $(this).find('option:selected').val();
  var amount = (qty * price[type])
  sum += amount;
  $(this).find('.amount').text('$' + amount.toFixed(2));
});

一个可能的解决方案是将初始选择保存在一个变量中，然后使用$。每个都要遍历价格，这是问题所在(它是一个对象)。下面是JSFiddle修改后的代码:

var subTotals = $('#bookingTable > tbody  > tr');
var index = 0;
$.each(prices,function (key,value) {
    var qty = subTotals.eq(index).find('option:selected').val();
    var amount = (qty * value)
    alert(amount);
    sum += amount;
    subTotals.eq(index++).find('.amount').text('$' + amount.toFixed(2));
});

相关文章：