Question

过去5天我一直在努力，但仍然无法弄清楚。

这是表格

Number of people attending input field<input id="persons" value="1" />

<input type="radio" name="cake1" value="cake1">choose Cake 1 radio button<br>
<input type="radio" name="cake2" value="cake2">choose Cake 2 radio button

<p class="totals" id="subtotal">Total: input field</p>

所以我需要的是，如果有人提出参与其中的人数将显示总领域的成本。

总价格取决于他们挑选的蛋糕和人数。所以6人=蛋糕＃1 25美元，但如果他们放7个人，我们将不得不收取12人的价格= 45美元

如果他们选择蛋糕＃2价格会有不同的定价

所以希望有人能提前帮助我。

Cake #1
Persons     Price
6    ppl =  25.00 $
12   ppl =  45.00 $
24   ppl =  85.00 $
48   ppl =  120.00 $
60   ppl =  140.00 $
80   ppl =  160.00 $

Cake #2
Persons     Price
6    ppl =  30.00 $
12   ppl =  54.00 $
24   ppl =  96.00 $
36   ppl =  135.00 $
48   ppl =  160.00 $
60   ppl =  170.00 $
80   ppl =  200.00 $
100  ppl =  240.00 $
120  ppl =  276.00 $

Answer 1

这是你正在寻找的东西吗？

// This objects must be ordered by number of persons
cake1 = {6: 25, 12: 45, 24: 85, 48: 120, 60: 140, 80: 160};

var getPrice = function (people, cake) {
    for (var p in cake) {
        if (p>=people) return cake[p];
    }
};

// Example
console.log(getPrice(7, cake1))

Answer 2

尝试一下这个

<强> HTML

<input id="numPeople" value="1" name="numPeople" />

<input type="radio" name="cakeType" value="cake1" />Cake 1<br />
<input type="radio" name="cakeType" value="cake2" />Cake 2

<input type="submit" name="go" id="go" value="Calculate Price" />
<p class="totals" id="subtotal">Total: <span></span></p>

jQuery （可能只有JS，但大多数人已经有了jQuery）

// These objects must be ordered by number of persons - {numPpl: price, ...}
cake1 = {6: 25, 12: 45, ... };
cake2 = {6: 30, 12: 54, ... };

// Set the string cake name to the actual array
cakes = {"cake1":cake1, "cake2":cake2};

// fn looks through price arrays, returns price based on number of people
function getPrice(people, cake) {
    for (var p in cakes[cake]) {
        if (p>=people) return cakes[cake][p];
    }
};

$("#go").click(function(){
    var n = $("#numPeople").val(),
        c = $("input[name=cakeType]:checked").val(),
        out = (typeof n == "undefined" || typeof c == "undefined"
               ? "Please select a cake type and enter the number of people attending"
               : "$" + getPrice(n, c) );
    $("#subtotal span").text( out );
});

http://jsfiddle.net/daCrosby/4sv4T/

更新

要在没有提交按钮的情况下进行更新，请将$("#go").click更改为$("#numPeople, input[name=cakeType]").change。

我的错误，上面的getPrice函数尝试将p与people作为字符串进行比较 - 应该是整数。我现在也在它有正确答案时停止循环。这是更新的：

// fn looks through price arrays, returns price based on number of people
function getPrice(people, cake) {
    var out = "";
    for (var p in cakes[cake]) {
        if (parseInt(p) >= parseInt(people)) {
            out = cakes[cake][p];
            break;
        }
    }
    return out;
};

http://jsfiddle.net/daCrosby/4sv4T/1/

Answer 3

设置相同的蛋糕名称，否则用户将无法更改选项
将type="number"设置为人员输入字段

<强> HTML

Number of people <input id="persons" type="number" min="1" value="1" /><br/>

<input type="radio" name="cake" id="cake1" value="cake1">choose Cake 1 radio button<br>
<input type="radio" name="cake" id="cake2" value="cake2">choose Cake 2 radio button

<p class="totals" id="subtotal">Total: 0</p>

Javascript （请参阅the fiddle）

// store elements into Nodes
var Node = {};
["persons","subtotal","cake1","cake2"].forEach(function(node) {
    Node[node] = document.getElementById(node);
});

function getCake() {
    if(Node.cake1.checked) return Node.cake1;
    if(Node.cake2.checked) return Node.cake2;
}

function computePrice() {
  var cake = getCake();
  if(!cake) return; // no option checked yet

  // fill in the rest of the values to make some effort
  var prices = cake==Node.cake1 ?
    {0:25, 6:45, 12:85, 24:120}:
    {0:30, 6:54, 12:96, 24:135};

  // compute price
  var price = 0;
  for(var i=0; i<=Node.persons.value; ++i) if(prices[i]) price = prices[i];
  Node.subtotal.innerHTML = "Total: "+price;
}

// hook the onchange event for realtime recalculation
[Node.persons,Node.cake1,Node.cake2].forEach(function(element) {
    element.addEventListener("change",computePrice);
});

注意：由于javascript使用DOM操作，因此必须将其放在html代码之后或window.onload或DOMContentLoaded事件中。

Javascript if else total cart

3 个答案:

更新