좋은 하루 되세요 여러분, 여기 약간의 도움이 필요합니다. 그래서 여기에 수량 입력을 만들었지 만 선택한 수량과 일치하도록 가격 데이터를 계산하는 방법을 찾을 수 없습니다. 결과를 위해 여기에서 첫 번째와 같아야하지만 얼마나 많은 클릭 버튼에 대한 가격을 계산하는 대신 내가 주문하려는 수량에 대해 계산합니다. 여기서 사용할 수있는 방법에 대한 팁이 있습니까? 관심을 가져 주셔서 감사합니다. 제 질문이 누구에게도 혼란스럽지 않았기를 바랍니다 ..
다음은 코드입니다.
var data = {
Food: [
{
id: 1,
name: 'Fried Rice',
price: 10000
},
{
id: 2,
name: 'Fried Noodle',
price: 9000
},
{
id: 3,
name: 'Pancake',
price: 8500
},
{
id: 4,
name: 'French Fries',
price: 7500
}
],
Drink: [
{
id: 1,
name: 'Cola',
price: 4600
},
{
id: 2,
name: 'Orange Juice',
price: 5400
},
{
id: 3,
name: 'Mineral Water',
price: 3500
},
{
id: 4,
name: 'Coffee',
price: 5800
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function () {
var selectMenu = {};
$("button").click(function () {
var itemName = $("#type_select option:selected").attr('label');
var price = Number($("#type_select option:selected").data('price'));
if (selectMenu.hasOwnProperty(itemName)) {
selectMenu[itemName] += price;
} else {
selectMenu[itemName] = price;
}
var result =JSON.stringify(selectMenu).replace(/,/g,'<br>').replace(/\{|\}|"/g,"")
$(".result").html(result);
});
});button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
</style>
<title>Menu</title>
</head>
<body>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row">
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
<div class="col-md-4">
<input type="number" class="form-control form-control-lg mb-3" id="num">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary">Order</button>
<br>
<br>
<div class="result text-center"></div>내가 당신을 올바르게 이해했다면
먼저 당신이 사고 싶은 제품의 수를 얻어야합니다
그런 다음 단순히 곱하면 합계가
$("button").click(function() {
var itemName = $("#type_select option:selected").attr('label');
var price = Number($("#type_select option:selected").data('price'));
var count = Number($("#num").val());
var total = price * count;
selectMenu[itemName] = total
var result = JSON.stringify(selectMenu).replace(/,/g, '<br>').replace(/\{|\}|"/g, "")
$(".result").html(result);
});이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다