价格取决于无线电输入的选择
我尝试了，但在此之后无法获得，因此请帮助我完成此操作。
我想设置成人价格，如果选择私人，则有亚视是100，没有亚视是10
但如果选择共享，则使用ATV时为50，不使用ATV时为5
对于儿童，如果选择了Private，则有ATV的为50，没有ATV的为5 但如果选择共享，则带ATV的为25，不带3的 数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">function calculateTotal() {
const privateAdultPrice = 0;
const sharedAdultPrice = 0;
const privateChildrenPrice = 0;
const sharedChildrenPrice = 0;
const withAtvAdultPrice = 100;
const withAtvChildrenPrice = 80;
const noAtvPrice = 10;
const adults = +document.querySelector('#adults').value;
const children = +document.querySelector('#children').value;
const isPrivate = document.getElementById('private').checked;
const isWithAtv = document.getElementById('withatv').checked;
const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice;
const adultPrice = adults * (adultTripPrice + adultVehiclePrice)
const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice)
return adultPrice + childrenPrice;
}
function updateTotal() {
const total = calculateTotal();
console.log(total);
document.querySelector('#totalPrice').innerHTML = total;
}
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
updateTotal();
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
updateTotal();
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
updateTotal();
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function () {
MainImg.src = smallimg[0].src;
};
smallimg[1].onclick = function () {
MainImg.src = smallimg[1].src;
};
smallimg[2].onclick = function () {
MainImg.src = smallimg[2].src;
};
smallimg[3].onclick = function () {
MainImg.src = smallimg[3].src;
};<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
width: 2000px
}
input[type='radio'] {
display: none;
}
label[for='private'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for='shared'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
label[for='withatv'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for='withoutatv'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type='radio']:checked + label {
background-color: orangered;
color: white;
}
input[type='radio']:checked + label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img
class="img-fluid w-100 pb-1"
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
alt=""
id="MainImg"
width="450"
/>
<div class="small-img-group">
<div class="small-img-col">
<img
src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total:</label><label id="totalPrice"class="total Price"></label></h2>
<div class="counter1">
<label class="Adults">Adults</label>
<div class="down" onclick="decreaseCount(event, this)">-</div>
<input id="adults" type="text" value="1" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
</div>
<div class="counter2">
<label class="Children">Children</label>
<div class="down" onclick="decreaseCount2(event, this)">-</div>
<input id="children" type="text" value="0" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
</div>
<div class="container" style="padding-left: 0; padding-top: 5px">
<div>
<input
type="radio"
name="occupancy"
id="private"
checked="checked"
onclick="updateTotal()"
/>
<label for="private">Private</label>
<input
type="radio"
name="occupancy"
id="shared"
onclick="updateTotal()"
/>
<label for="shared">Shared</label>
</div>
<div>
<input
type="radio"
name="atv"
id="withatv"
checked="checked"
onclick="updateTotal()"
/>
<label for="withatv">With ATV</label>
<input
type="radio"
name="atv"
id="withoutatv"
onclick="updateTotal()"
/>
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script>
</script>
</body>
</html>嗨 我试过了，但在此之后无法获得，因此请帮助我处理此问题。
我想设置成人价格，如果选择私人，则有亚视的是100，没有亚视的是10
但如果选择共享，则使用ATV时为50，不使用ATV时为5
对于儿童，如果选择了Private，则有ATV的为50，没有ATV的为5 但如果选择共享，则带ATV的为25，不带3的解决方案
现在，您的价格取决于条件。
因此，计算方法略有不同。翻译您的话，在JS代码中应该是这样的：
const adultTripPrice = isPrivate && isWithAtv ? 100 : isPrivate ? 10 : isWithAtv ? 50 : 5;
const childrenTripPrice = isPrivate && isWithAtv ? 50 : isPrivate ? 5 : isWithAtv ? 25 : 3;
const adultPrice = adults * (adultTripPrice)
const childrenPrice = children * (childrenTripPrice)
它针对成人进行评估
isPrivate和isWithATV然后100isPrivate(但不是isWithATV)然后10isWithATV(但不是isPrivate)则为50- 不是
isPrivate也不是isWithATV然后是5。
，然后将该数字乘以成人数。(同样的逻辑也适用于孩子)
更新后的代码如下所示：function calculateTotal() {
const privateAdultPrice = 0;
const sharedAdultPrice = 0;
const privateChildrenPrice = 0;
const sharedChildrenPrice = 0;
const withAtvAdultPrice = 100;
const withAtvChildrenPrice = 80;
const noAtvPrice = 10;
const adults = +document.querySelector('#adults').value;
const children = +document.querySelector('#children').value;
const isPrivate = document.getElementById('private').checked;
const isWithAtv = document.getElementById('withatv').checked;
const adultTripPrice = isPrivate && isWithAtv ? 100 : isPrivate ? 10 : isWithAtv ? 50 : 5;
const childrenTripPrice = isPrivate && isWithAtv ? 50 : isPrivate ? 5 : isWithAtv ? 25 : 3;
const adultPrice = adults * (adultTripPrice)
const childrenPrice = children * (childrenTripPrice)
return adultPrice + childrenPrice;
}
function updateTotal() {
const total = calculateTotal();
console.log(total);
document.querySelector('#totalPrice').innerHTML = total;
}
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
updateTotal();
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
updateTotal();
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
updateTotal();
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function () {
MainImg.src = smallimg[0].src;
};
smallimg[1].onclick = function () {
MainImg.src = smallimg[1].src;
};
smallimg[2].onclick = function () {
MainImg.src = smallimg[2].src;
};
smallimg[3].onclick = function () {
MainImg.src = smallimg[3].src;
};<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
width: 2000px
}
input[type='radio'] {
display: none;
}
label[for='private'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for='shared'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
label[for='withatv'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for='withoutatv'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type='radio']:checked + label {
background-color: orangered;
color: white;
}
input[type='radio']:checked + label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img
class="img-fluid w-100 pb-1"
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
alt=""
id="MainImg"
width="450"
/>
<div class="small-img-group">
<div class="small-img-col">
<img
src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total:</label><label id="totalPrice"class="total Price"></label></h2>
<div class="counter1">
<label class="Adults">Adults</label>
<div class="down" onclick="decreaseCount(event, this)">-</div>
<input id="adults" type="text" value="1" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
</div>
<div class="counter2">
<label class="Children">Children</label>
<div class="down" onclick="decreaseCount2(event, this)">-</div>
<input id="children" type="text" value="0" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
</div>
<div class="container" style="padding-left: 0; padding-top: 5px">
<div>
<input
type="radio"
name="occupancy"
id="private"
checked="checked"
onclick="updateTotal()"
/>
<label for="private">Private</label>
<input
type="radio"
name="occupancy"
id="shared"
onclick="updateTotal()"
/>
<label for="shared">Shared</label>
</div>
<div>
<input
type="radio"
name="atv"
id="withatv"
checked="checked"
onclick="updateTotal()"
/>
<label for="withatv">With ATV</label>
<input
type="radio"
name="atv"
id="withoutatv"
onclick="updateTotal()"
/>
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script>
</script>
</body>
</html>相关文章