javascript - 如何在jquery/JS中引用对象数组?

标签 javascript jquery html

我正在尝试制作一个根据所选日期和时间更新门票价格的表单。

就门票定价而言,我一直在使用 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 中,在本例中为 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

我创建了一个 fiddle ,这样你们就可以看到整个事情是如何运作的。如果任何代码有问题,请原谅。当它实际出现在我的网站上时,效果会更好。

很抱歉这篇文章很长。我只是想确保我对自己的问题非常清楚。如果有任何不清楚的地方,请告诉我,我会尽力澄清。

谢谢!

最佳答案

您应该在当天下拉列表的每次更改以及任何时间下拉列表更改时执行该函数。然后将这些值传递给函数,并将价格列设置为相应的值

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

关于javascript - 如何在jquery/JS中引用对象数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32581016/

相关文章:

javascript - 为什么 PHP echo 返回完整标记的 html 而不是 echo 中的内容?

javascript - keyup 在 IE 8 中不起作用

javascript - 在 JavaScript 中替换/突出显示字符串 - 保持区分大小写

HTML 5 - 浏览器上的 Web 套接字关闭

jquery - 图片在 webkit 中乱七八糟

html - Enter 上没有提交按钮的表单

javascript - hbbtv 应用程序在真实电视上测试/调试

javascript - 使用 jQuery 仅抓取单击事件上的按钮元素

javascript - jQuery : XML - Reading child nodes from a specific node

c# - 如何像使用 Telerik RadGrid 一样在 Kendo Grid 上设置 "UniqueName"?