我如何在特许摊位上编写可增加用户账单的全部功能?这是一张照片,在每个按钮上附加了一定的价格,并在单击时将其添加到总计中。如何将所有显示的价格相加并显示在我的总计框中?预先感谢您的帮助!
选择项目的功能:
function orderUp(val) {
switch(val){
case "hb":
if(!voidItem.checked){
hbQty++
hbSub += 3.00
}else{
if(hbQty >0){
hbQty--
hbSub -= 3.00
}
}
break;
case "cb":
if(!voidItem.checked){
cbQty++
cbSub += 3.50
}else{
if(cbQty >0){
cbQty--
cbSub -= 3.50
}
}
break;
显示结果的功能:
function recieptOut(){
var outputStr = ""
if (hbQty > 0){
outputStr += "<div class = 'row'><div class = 'col'>" + hbQty + "</div>"
outputStr += "<div class='col'>" + hbName + "</div>"
outputStr += "<div class='col'>" + hbSub + "</div></div>"
}
if (cbQty > 0){
outputStr += "<div class = 'row'><div class = 'col'>" + cbQty + "</div>"
outputStr += "<div class='col'>" + cbName + "</div>"
outputStr += "<div class='col'>" + cbSub + "</div></div>"
}
您有一个非常广泛的问题,但我可以告诉您,您已经步入正轨。我希望这个答案有助于您了解完成任务的一些方法-
<body>
<main id="app"><main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="shop.js"></script>
<script>
/* items on the menu */
const menuItems =
[ { name: "Hamburger", price: 3.00 }
, { name: "Hotdog", price: 2.50 }
, { name: "Nachos", price: 3.00 }
, { name: "Chips", price: 0.75 }
, { name: "Cheeseburger", price: 3.50 }
, { name: "Bottled Water", price: 2.00 }
, { name: "Fries", price: 2.50 }
]
/* where to display app */
const main =
document.querySelector("main")
/* run the shop */
runShop(main, menuItems)
</script>
</body>
shop.js
[runShop
功能使用一个元素来绘制商店和可订购的物品-
const initialState =
{ cart: [] }
const runShop = (root, items = []) => {
const menu = makeMenu(items)
const cart = makeCart()
const total = makeTotal()
const reset = makeButton("New Order", newOrder)
root.appendChild(menu)
root.appendChild(cart)
root.appendChild(total)
root.appendChild(reset)
let state = initialState
dispatch = (action) => {
state = responder(state, action)
draw(state, { menu, cart, total })
}
dispatch({ action: "NEW ORDER" })
}
我们可以看到,runShop
函数也将工作分解为更小的部分。这是makeMenu
部分-
const makeMenu = (items = []) => {
const e = document.createElement("div")
for (const i of items)
e.appendChild(makeButton(i.name, addToOrder(i)))
return e
}
const makeButton = (text, onclick) => {
const e = document.createElement("button")
e.appendChild(document.createTextNode(text))
e.onclick = onclick
return e
}
我们在其他部分makeCart
和makeTotal
中也继续像这样细分内容]]
const makeCart = () => { return document.createElement("div") } const makeCartItem = (item = {}) => { const e = document.createElement("div") const t = `${item.name} x ${item.qty} (${drawMoney(item.price)} each)` e.appendChild(document.createTextNode(t)) return e } const makeTotal = () => { return document.createElement("div") }
现在我们需要一种方法来
draw
商店。此函数需要我们也实现的drawMoney
和calcTotal
函数-
中实现const draw = (state = {}, { menu, cart, total }) => { /* menu */ // no changes... /* cart */ cart.textContent = "" for (const item of state.cart) cart.appendChild(makeCartItem(item)) /* total */ total.textContent = `Total: ${drawMoney(calcTotal(state.cart))}` } const drawMoney = (m = 0) => m.toLocaleString ( "en-US" , { style: "currency" , currency: "USD" } ) const calcTotal = (items = []) => items.reduce ( (total, { qty = 0, price = 0 }) => total + (qty * price) , 0 )
菜单按钮调用
addToOrder(item)
,复位按钮调用newOrder
。这些是对商店的dispatch
的简单调用,该调用在runShop
-
const addToOrder = (item = {}) => event => dispatch({ action: "ADD ITEM", item }) const newOrder = event => dispatch({ action: "NEW ORDER" })
responder
收到来自dispatch
的电话,并为您提供了一个位置,可以针对每个用户操作更新商店的状态-
const responder = (state, action) => { switch (action.action) { case "NEW ORDER": return initialState case "ADD ITEM": return { ...state, cart: insert(state.cart, action.item) } /* implement other actions */ // case ... default: throw Error(`unsupported action ${action.action}`) } return state }
"NEW ORDER"
操作很容易处理,我们只需返回空状态initialState
。"ADD ITEM"
必须在state.cart
中插入一个项目。我们使用insert
辅助函数,因为我们希望更好地控制项目的添加方式-
qty = 0
将其添加到购物车中>qty
更新为qty + 1
const { fromJS } = require("immutable") const insert = (cart = [], item = {}) => { /* find item in cart? */ const location = cart.findIndex(i => i.name === item.name) /* insert new item */ if (location === -1) return [...cart, { ...item, qty: 1 } ] /* update existing item */ else return fromJS(cart) .update ( location , item => item.update("qty", n => n + 1) ) .toJS() }
运行下面的演示以查看代码是否正常工作-
<main id="app"><main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script>
/* shop.js */
const { fromJS } = Immutable;
let dispatch = _ => {
throw Error("must initialize shop first")
}
/* element constructors */
const makeMenu = (items = []) => {
const e = document.createElement("div")
for (const i of items)
e.appendChild(makeButton(i.name, addToOrder(i)))
return e
}
const makeButton = (text, onclick) => {
const e = document.createElement("button")
e.appendChild(document.createTextNode(text))
e.onclick = onclick
return e
}
const makeCart = () => {
return document.createElement("div")
}
const makeCartItem = (item = {}) => {
const e = document.createElement("div")
const t = `${item.name} x ${item.qty} (${drawMoney(item.price)} each)`
e.appendChild(document.createTextNode(t))
return e
}
const makeTotal = () => {
return document.createElement("div")
}
/* actions */
const addToOrder = (item = {}) => event =>
dispatch({ action: "ADD ITEM", item })
const newOrder = event =>
dispatch({ action: "NEW ORDER" })
/* renderers */
const draw = (state = {}, { menu, cart, total }) => {
/* menu */
// no changes...
/* cart */
cart.textContent = ""
for (const item of state.cart)
cart.appendChild(makeCartItem(item))
/* total */
total.textContent =
`Total: ${drawMoney(calcTotal(state.cart))}`
}
const drawMoney = (m = 0) =>
m.toLocaleString
( "en-US"
, { style: "currency" , currency: "USD" }
)
const calcTotal = (items = []) =>
items.reduce
( (total, { qty = 0, price = 0 }) =>
total + (qty * price)
, 0
)
/* state */
const initialState =
{ cart: [] }
const responder = (state, action) => {
switch (action.action) {
case "NEW ORDER":
return initialState
case "ADD ITEM":
return { ...state, cart: insert(state.cart, action.item) }
default:
throw Error(`unsupported action ${action.action}`)
}
return state
}
const insert = (cart = [], item = {}) => {
/* find item in cart? */
const location =
cart.findIndex(i => i.name === item.name)
/* insert new item */
if (location === -1)
return [...cart, { ...item, qty: 1 } ]
/* update existing item */
else
return fromJS(cart)
.update
( location
, item => item.update("qty", n => n + 1)
)
.toJS()
}
/* run */
const runShop = (root, items = []) => {
const menu = makeMenu(items)
const cart = makeCart()
const total = makeTotal()
const reset = makeButton("New Order", newOrder)
root.appendChild(menu)
root.appendChild(cart)
root.appendChild(total)
root.appendChild(reset)
let state = initialState
dispatch = (action) => {
state = responder(state, action)
draw(state, { menu, cart, total })
}
dispatch({ action: "NEW ORDER" })
}
</script>
<script>
/* items on the menu */
const menuItems =
[ { name: "Hamburger", price: 3.00 }
, { name: "Hotdog", price: 2.50 }
, { name: "Nachos", price: 3.00 }
, { name: "Chips", price: 0.75 }
, { name: "Cheeseburger", price: 3.50 }
, { name: "Bottled Water", price: 2.00 }
, { name: "Fries", price: 2.50 }
]
/* where to display app */
const main =
document.querySelector("main")
/* run the shop */
runShop(main, menuItems)
</script>