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。
然后将数量值乘以价格，该价格存储在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));
}

现在这是我的问题

到目前为止，基本价格计算已经下降。我的下一步是在选择特定日期/时间时考虑折扣。

我已经获得了一个代码片段，我必须将其从PHP转换为javascript（如果你看到任何代码，请指出代码中的任何错误）并假设使用的是对象数组：

function getPrices ( day, time ) {
  var prices = {};
  if ( day=='Monday' || day == 'Tuesday' || time=='1PM' ) {
    prices['SA']=12;
    prices['SP']=10;
    prices['SC']=8;
    prices['FA']=25;
    prices['FC']=20;
    prices['B1']=20;
    prices['B2']=20;
    prices['B3']=20;
  } else {
    prices['SA']=18;
    prices['SP']=15;
    prices['SC']=12;
    prices['FA']=30;
    prices['FC']=25;
    prices['B1']=30;
    prices['B2']=30;
    prices['B3']=30;
  }
  return prices;
}

首先，我想知道如何引用这些'对象'。

其次，我不确定如何将其与我当前的代码合并。它现在的方式，它使用qty类从选择选项中获取“SA”值。这很重要，因为在表单提交数据中，它需要显示用户购买的每种类型的票证的数量。

JSFiddle

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

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

谢谢！

Answer 1

您应该在当天下拉列表的每次更改时执行该功能，并在任何时候下拉列表更改。然后将这些值传递给函数，并将price列设置为相应的值

//this gets the correct prices
var prices = getPrices($("#whichDay").val(), $("#whichSession").val())
//this is how you access the prices returned
alert(prices.SA)
alert(prices.SP)
//then you need to target the correct price elements with jQuery and set according price

你可以像这样重写这些对象以获得更少的代码：

   prices = {SA:12, SP:10, SC:8, FA:25, FC:20, B1:20, B2:20, B3:20}

如何在jquery / JS中引用对象数组？

1 个答案: