Question

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

就门票的定价而言，我一直在使用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。
然后将数量值乘以价格，该价格存储在value HTML的<input>中，在这种情况下为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

我创造了一个小提琴，所以你们可以看到整个事情的运作方式。如果任何代码狡猾，请原谅。当它实际上在我的网站上时，它的效果会好很多。

对不起，很长的帖子。我只是想确保我对我的问题非常清楚。如果有任何不清楚的地方，请告诉我，我会尽力澄清。

提前致谢！

Answer 1

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

所以，如果你这样做：

var amount = (qty * prices.SP);

而不是：

var amount = (qty * price);

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

Answer 2

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

jdbc:derby:AnimalDB;create=true;user=test;password=test

Answer 3

一种可能的解决方案是将初始选择保存在变量中，然后使用$ .each迭代价格，这就是问题（它是一个对象）。这是来自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));
});

希望得到这个帮助。

计算折扣价格没有显示为jquery中的数字？

3 个答案: