-2

我在过去的 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 人 = 25 美元的蛋糕 #1 但如果他们放 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 $
4

3 回答 3

0
  • 设置相同的蛋糕名称，否则用户将无法更改选项
  • 设置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（见小提琴）

// 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.onloadDOMContentLoaded事件中。

于 2013-05-12T06:40:00.127 回答
0

这是你要找的东西吗？

// 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))
于 2013-05-12T05:50:21.607 回答
0

试试这样的东西

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-only，但大多数人已经拥有 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/

于 2013-05-12T06:25:53.130 回答