在此頁面上，您可以通過單擊串列項來訂購門票。單擊的專案被分組，然后放在頁面上的一個空容器中。我添加了一個示例視圖來闡明結果應該是什么。
在這一點上，我被困住了。我可以插入物件，但我不知道如何解壓物件內部的內容。那應該是一鍵購票。希望這里有人可以指出我解決這個問題的正確方向。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
/* Styling bullets list items */
li {
list-style: none;
}
li:before {
content: "\1F3B8";
margin-right: 10px;
}
/* Styling for tickets ordered */
#order {
background-color: #b0c4de;
font-size: 120%;
}
.sample {
background-color: #b0c4de;
font-size: 120%;
}
</style>
</head>
<body>
<p>Here you'll find the prices for the tickets:</p>
<ul>
<li onclick="push(tckt1)">Saturday: €110</li>
<li onclick="push(tckt2)">Sunday: €110</li>
<li onclick="push(tckt3)">Monday: €110</li>
<li onclick="push(tckt4)">Weekend: €230</li>
</ul>
<div id="order">
</div>
<br>
// This is a sample of how the output should look.
<div class="sample">
Your order:<br>
3 Weekend-tickets à €230 = € 690<br>
1 Sunday-tickets à €110 = € 110<br>
Totaalbedrag: €800 - 10% korting à €80 = €720
</div>
<script>
const order = document.getElementById("order")
let tickets = [];
const tckt1 = {id: 1, name: "Saturday-tickets à €110", price: 110};
const tckt2 = {id: 2, name: "Sunday-tickets à €110", price: 110};
const tckt3 = {id: 3, name: "Monday-tickets à €110", price: 110};
const tckt4 = {id: 4, name: "Weekend-tickets à €230", price: 230};
// Push object in array tickets
function push(temp){
tickets.push(temp);
let res = tickets.reduce(function (x,cur){
let item = cur.id cur.name cur.price
if (!x[item]) x[item] = 0;
x[item] = x[item] 1
return x
}, {})
let results = []
for (const key in res) {
const count = res[key];
const id = key.slice(0, 1)
const day = key.slice(1, 24)
const price = key.slice(24)
results.push({
id: id,
name: day,
price: price,
count: count
})
}
console.log(results)
order.innerHTML =results[0];
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
首先：使用行內事件處理程式通常不是一個好主意。下一個片段使用事件委托來處理點擊。
其次，我對您的代碼進行了一些重構。為了識別點擊的發起者，它使用data-attribute. 單擊附件票定義后，將被推送到陣列 ( savedTickets)。該陣列被聚合到包含總值的Object( ) 中，使用票證定義名稱屬性作為鍵）。orders由此，結果 ( div#orders) 被填充，使用insertAdjacentHTML. 文本使用 聚合template literals。
第三：我用過荷蘭語；）
document.addEventListener(`click`, pushTicketAndShowResult);
const [savedTickets, tickets, discount] = initializeValues();
function pushTicketAndShowResult(evt) {
if (!evt.target.dataset.ticket) {
return;
}
const ticket = tickets[`tckt${evt.target.dataset.ticket}`];
savedTickets.push(ticket);
const orders = savedTickets.reduce((acc, t) => {
acc[t.name] = acc[t.name] || {};
acc[t.name].n = (acc[t.name].n || 0) 1;
acc[t.name].total = acc[t.name].n * t.price;
return acc;
}, {});
const result = document.querySelector(`#orders`);
const total = Object.values(orders).reduce( (acc, o) => acc o.total, 0);
const discountAmount = total * discount/100;
const totalWithDiscount = total - discountAmount;
const yourOrders = Object.entries(orders)
.map( ([name, val]) => `${val.n} ${name} = €${val.total},--`)
.join(`<br>`)
result.textContent = ``;
result.insertAdjacentHTML(`beforeend`, `<b>Uw bestelling</b><br>${
yourOrders}<br>Totaalbedrag: €${total},--<br>Korting ${
discount}% = €${discountAmount},--<br><b>U betaalt €${
totalWithDiscount},--</b>`);
}
function initializeValues() {
return [
[], {
tckt1: {
id: 1,
name: "zaterdag-ticket(s) à €110,--",
price: 110
},
tckt2: {
id: 2,
name: "zondag-ticket(s) à €110,--",
price: 110
},
tckt3: {
id: 3,
name: "maandag-ticket(s) à €110,--",
price: 110
},
tckt4: {
id: 4,
name: "weekend-ticket(s) à €230,--",
price: 230
}
},
10
];
}body {
font: normal 12px/15px verdana, arial;
}
li {
list-style: none;
cursor: pointer;
}
li:before {
content: "\1F3B8";
margin-right: 10px;
}
#order {
background-color: #b0c4de;
font-size: 120%;
}
.sample {
background-color: #b0c4de;
font-size: 120%;
}<p>Ticketprijzen. Klik op een prijs om te bestellen:</p>
<ul>
<li data-ticket="1">Zaterdag: €110,--</li>
<li data-ticket="2">Zondag: €110,--</li>
<li data-ticket="3">Maandag: €110,--</li>
<li data-ticket="4">Weekend: €230,--</li>
</ul>
<div id="orders">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442471.html
標籤：javascript html css
上一篇：使用C#從網頁獲取十進制值
下一篇：使游標跳過禁用文本表單