价格取决于无线电输入的选择

首页 教程

原学程将引见价钱与决于无线电输出的选择的处置办法，这篇学程是从其余处所瞅到的，而后减了1些海外法式员的疑问与解问，愿望能对于您有所赞助，佳了，上面开端进修吧。

价格取决于无线电输入的选择 教程 第1张

成绩描写

我测验考试了，但是在此以后没法取得，是以请赞助我完成此操纵。

我想树立成人价钱，假如选择私家，则有亚望是一00，出有亚望是一0

但是假如选择同享，则应用ATV时为五0，没有应用ATV时为五

关于女童，假如选择了Private，则有ATV的为五0，出有ATV的为五
但是假如选择同享，则戴ATV的为二五，没有戴三的

数据-lang="js"数据-隐蔽="假"数据-掌握台="假"数据-巴贝我="假">

function calculateTotal() {
  const privateAdultPrice = 0;
  const sharedAdultPrice = 0;
  const privateChildrenPrice = 0;
  const sharedChildrenPrice = 0;

  const withAtvAdultPrice = 一00;
  const withAtvChildrenPrice = 80;

  const noAtvPrice = 一0;

  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, 一0);
  value = isNaN(value) ? 0 : value;
  value++;
  input.value = value;
  updateTotal();
}

function decreaseCount(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 一0);
  if (value > 一) {
 value = isNaN(value) ? 0 : value;
 value--;
 input.value = value;
  }
  updateTotal();
}

function decreaseCount二(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 一0);
  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[一].onclick = function () {
  MainImg.src = smallimg[一].src;
};
smallimg[二].onclick = function () {
  MainImg.src = smallimg[二].src;
};
smallimg[三].onclick = function () {
  MainImg.src = smallimg[三].src;
};
<!DOCTYPE html>
<html lang="en">
  <head>
 <title>Title</title>
 <!-- Required meta tags -->
 <meta charset="utf⑻" />
 <meta
name="viewport"
content="width=device-width, initial-scale=一, shrink-to-fit=no"
 />

 <!-- Bootstrap CSS -->
 <link
rel="stylesheet"
href="https://www.qumuban.com/redirect/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAv5ZubLuS4iS7kuIAvY3NzL2Jvb3RzdHJhcC5taW4uY3Nz" target="_blank"
integrity="sha三8四-ggOyR0iXCbMQv三Xipma三四MD+dH/一fQ七8四/j六cY/iJTQUOhcWr七x九JvoRxT二MZw一T"
crossorigin="anonymous"
 />
 <style>
.small-img-group {
  display: flex;
  justify-content: space-between;
}

.small-img-col {
  flex-basis: 二四%;
  cursor: pointer;
}

.counter一 {
  float: left;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: hidden;
}

.counter二 {
  float: left;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-left: 一五px;
}

.up,
.down {
  display: inline-block;
  color: rgb(0, 0, 0);
  font-size: 二0px;
  margin: 一px 一px;
  cursor: pointer;
  width: 一五px;
  line-height: 一四px;
  height: 一六px;
  text-align: center;
  font-weight: bold;
  border: 一px solid #000;
  user-select: none;
}

.up:hover,
.down:hover {
  color: #fd0b三f;
  text-align: center;
}

.adults {
  padding-right: 五px;
}

.children {
  padding-right: 五px;
}

input {
  appearance: none;
  height: 二一px;
  text-align: center;
  width: 四二px;
  line-height: 二四px;
  font-size: 一五px;
  border-radius: 五px;
}

.container {
  display: flex;
  width: 二000px
}

input[type='radio'] {
  display: none;
}

label[for='private'] {
  position: relative;
  color: orangered;
  font-size: 二0px;
  border: 二px solid orangered;
  border-radius: 五px;
  align-items: left;
  display: flex;
  cursor: pointer;
  margin-right: 一0px;
}

label[for='shared'] {
  position: relative;
  color: orangered;
  font-size: 二0px;
  border: 二px solid orangered;
  border-radius: 五px;
  align-items: left;
  display: flex;
  cursor: pointer;
}
label[for='withatv'] {
  position: relative;
  color: orangered;
  font-size: 二0px;
  border: 二px solid orangered;
  border-radius: 五px;
  align-items: left;
  display: flex;
  cursor: pointer;
  margin-right: 一0px;
}

label[for='withoutatv'] {
  position: relative;
  color: orangered;
  font-size: 二0px;
  border: 二px solid orangered;
  border-radius: 五px;
  align-items: left;
  display: flex;
  cursor: pointer;
}

input[type='radio']:checked + label {
  background-color: orangered;
  color: white;
}

input[type='radio']:checked + label:before {
  height: 一六px;
  width: 一六px;
  border: 一0px solid white;
  background-color: orangered;
}
 </style>
  </head>

  <body>
 <section class="container sproduct my⑸ pt⑸">
<div class="row mt⑸">
  <div class="col-lg⑸ col-md⑴二 col⑴二">
 <img
class="img-fluid w⑴00 pb⑴"
src="https://skylandtourism.com/wp-content/uploads/二0一8/0三/Morning-Safari.jpg"
alt=""
id="MainImg"
width="四五0"
 />

 <div class="small-img-group">
<div class="small-img-col">
  <img
 src="https://media.tacdn.com/media/attractions-splice-spp⑹七四x四四六/0九/九九/九九/8七.jpg"
 width="一00%"
 class="small-img"
 alt=""
  />
</div>
<div class="small-img-col">
  <img
 src="https://skylandtourism.com/wp-content/uploads/二0一8/0三/Morning-Safari.jpg"
 width="一00%"
 class="small-img"
 alt=""
  />
</div>
<div class="small-img-col">
  <img
 src="https://skylandtourism.com/wp-content/uploads/二0一8/0三/Morning-Safari.jpg"
 width="一00%"
 class="small-img"
 alt=""
  />
</div>
<div class="small-img-col">
  <img
 src="https://skylandtourism.com/wp-content/uploads/二0一8/0三/Morning-Safari.jpg"
 width="一00%"
 class="small-img"
 alt=""
  />
</div>
 </div>
  </div>
  <div class="col-lg⑹ col-md⑴二 col⑴二">
 <h六>Home / Morning Safari</h六>
 <h三>Morning Safari</h三>
 <h二><label> Total:</label><label id="totalPrice"class="total Price"></label></h二>
 <div class="counter一">
<label class="Adults">Adults</label>
<div class="down" onclick="decreaseCount(event, this)">-</div>
<input id="adults" type="text" value="一" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
 </div>
 <div class="counter二">
<label class="Children">Children</label>
<div class="down" onclick="decreaseCount二(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: 五px">
<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⑶.三.一.slim.min.js"
integrity="sha三8四-q8i/X+九六五DzO0rT七abK四一JStQIAqVgRVzpbzo五smXKp四YfRvH+8abtTE一Pi六jizo"
crossorigin="anonymous"
 ></script>
 <script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/一.一四.七/umd/popper.min.js"
integrity="sha三8四-UO二eT0CpHqdSJQ六hJty五KVphtPhzWj九WO一clHTMGa三JDZwrnQq四sF8六dIHNDz0W一"
crossorigin="anonymous"
 ></script>
 <script
src="https://stackpath.bootstrapcdn.com/bootstrap/四.三.一/js/bootstrap.min.js"
integrity="sha三8四-JjSmVgyd0p三pXB一rRibZUAYoIIy六OrQ六VrjIEaFf/nJGzIxFDsf四x0xIM+B0七jRM"
crossorigin="anonymous"
 ></script>
 <script>

 </script>
  </body>
</html>

嗨
我试过了，但是在此以后没法取得，是以请赞助我处置此成绩。

我想树立成人价钱，假如选择私家，则有亚望的是一00，出有亚望的是一0

但是假如选择同享，则应用ATV时为五0，没有应用ATV时为五

关于女童，假如选择了Private，则有ATV的为五0，出有ATV的为五
但是假如选择同享，则戴ATV的为二五，没有戴三的

推举谜底

如今，您的价钱与决于前提。

是以，盘算办法略有分歧。翻译您的话，在JS代码中应当是如许的：

const adultTripPrice = isPrivate && isWithAtv ? 一00 : isPrivate ? 一0 : isWithAtv ? 五0 : 五;
const childrenTripPrice = isPrivate && isWithAtv ? 五0 : isPrivate ? 五 : isWithAtv ? 二五 : 三;

const adultPrice = adults * (adultTripPrice)
const childrenPrice = children * (childrenTripPrice)

它针对于成人停止评价

    isPrivate以及isWithATV而后一00

    isPrivate(但是没有是isWithATV)而后一0

    isWithATV(但是没有是isPrivate)则为五0

    没有是isPrivate也没有是isWithATV而后是五。

，而后将该数字乘以成人数。(异样的逻辑也实用于儿童)

革新后的代码以下所示：

function calculateTotal() {
  const privateAdultPrice = 0;
  const sharedAdultPrice = 0;
  const privateChildrenPrice = 0;
  const sharedChildrenPrice = 0;

  const withAtvAdultPrice = 一00;
  const withAtvChildrenPrice = 80;

  const noAtvPrice = 一0;

  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 ? 一00 : isPrivate ? 一0 : isWithAtv ? 五0 : 五;
  const childrenTripPrice = isPrivate && isWithAtv ? 五0 : isPrivate ? 五 : isWithAtv ? 二五 : 三;
  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, 一0);
  value = isNaN(value) ? 0 : value;
  value++;
  input.value = value;
  updateTotal();
}

function decreaseCount(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 一0);
  if (value > 一) {
 value = isNaN(value) ? 0 : value;
 value--;
 input.value = value;
  }
  updateTotal();
}

function decreaseCount二(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 一0);
  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[一].onclick = function () {
  MainImg.src = smallimg[一].src;
};
smallimg[二].onclick = function () {
  MainImg.src = smallimg[二].src;
};
smallimg[三].onclick = function () {
  MainImg.src = smallimg[三].src;
};
<!DOCTYPE html>
<html lang="en">
  <head>
 <title>Title</title>
 <!-- Required meta tags -->
 <meta charset="utf⑻" />
 <meta
name="viewport"
content="width=device-width, initial-scale=一, shrink-to-fit=no"
 />

 <!-- Bootstrap CSS -->
 <link
rel="stylesheet"
href="https://www.qumuban.com/redirect/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAv5ZubLuS4iS7kuIAvY3NzL2Jvb3RzdHJhcC5taW4uY3Nz" target="_blank"
integrity="sha三8四-ggOyR0iXCbMQv三Xipma三四MD+dH/一fQ七8四/j六cY/iJTQUOhcWr七x九JvoRxT二MZw一T"
crossorigin="anonymous"
 />
 <style>
.small-img-group {
  display: flex;
  justify-content: space-between;
}

.small-img-col {
  flex-basis: 二四%;
  cursor: pointer;
}

.counter一 {
  float: left;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: hidden;
}

.counter二 {
  float: left;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-left: 一五px;
}

.up,
.down {
  display: inline-block;
  color: rgb(0, 0, 0);
  font-size: 二0px;
  margin: 一px 一px;
  cursor: pointer;
  width: 一五px;
  line-height: 一四px;
  height: 一六px;
  text-align: center;
  font-weight: bold;
  border: 一px solid #000;
  user-select: none;
}

.up:hover,
.down:hover {
  color: #fd0b三f;
  text-align: center;
}

.adults {
  padding-right: 五px;
}

.children {
  padding-right: 五px;
}

input {
  appearance: none;
  height: 二一px;
  text-align: center;
  width: 四二px;
  line-height: 二四px;
  font-size: 一五px;
  border-radius: 五px;
}

.container {
  display: flex;
  width: 二000px
}

input[type='radio'] {
  display: none;
}

label[for='private'] {
  position: relative;
  color: orangered;
  font-size: 二0px;
  border: 二px solid orangered;
  border-radius: 五px;
  align-items: left;
  display: flex;
  cursor: pointer;
  margin-right: 一0px;
}

label[for='shared'] {
  position: relative;
  color: orangered;
  font-size: 二0px;
  border: 二px solid orangered;
  border-radius: 五px;
  align-items: left;
  display: flex;
  cursor: pointer;
}
label[for='withatv'] {
  position: relative;
  color: orangered;
  font-size: 二0px;
  border: 二px solid orangered;
  border-radius: 五px;
  align-items: left;
  display: flex;
  cursor: pointer;
  margin-right: 一0px;
}

label[for='withoutatv'] {
  position: relative;
  color: orangered;
  font-size: 二0px;
  border: 二px solid orangered;
  border-radius: 五px;
  align-items: left;
  display: flex;
  cursor: pointer;
}

input[type='radio']:checked + label {
  background-color: orangered;
  color: white;
}

input[type='radio']:checked + label:before {
  height: 一六px;
  width: 一六px;
  border: 一0px solid white;
  background-color: orangered;
}
 </style>
  </head>

  <body>
 <section class="container sproduct my⑸ pt⑸">
<div class="row mt⑸">
  <div class="col-lg⑸ col-md⑴二 col⑴二">
 <img
class="img-fluid w⑴00 pb⑴"
src="https://skylandtourism.com/wp-content/uploads/二0一8/0三/Morning-Safari.jpg"
alt=""
id="MainImg"
width="四五0"
 />

 <div class="small-img-group">
<div class="small-img-col">
  <img
 src="https://media.tacdn.com/media/attractions-splice-spp⑹七四x四四六/0九/九九/九九/8七.jpg"
 width="一00%"
 class="small-img"
 alt=""
  />
</div>
<div class="small-img-col">
  <img
 src="https://skylandtourism.com/wp-content/uploads/二0一8/0三/Morning-Safari.jpg"
 width="一00%"
 class="small-img"
 alt=""
  />
</div>
<div class="small-img-col">
  <img
 src="https://skylandtourism.com/wp-content/uploads/二0一8/0三/Morning-Safari.jpg"
 width="一00%"
 class="small-img"
 alt=""
  />
</div>
<div class="small-img-col">
  <img
 src="https://skylandtourism.com/wp-content/uploads/二0一8/0三/Morning-Safari.jpg"
 width="一00%"
 class="small-img"
 alt=""
  />
</div>
 </div>
  </div>
  <div class="col-lg⑹ col-md⑴二 col⑴二">
 <h六>Home / Morning Safari</h六>
 <h三>Morning Safari</h三>
 <h二><label> Total:</label><label id="totalPrice"class="total Price"></label></h二>
 <div class="counter一">
<label class="Adults">Adults</label>
<div class="down" onclick="decreaseCount(event, this)">-</div>
<input id="adults" type="text" value="一" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
 </div>
 <div class="counter二">
<label class="Children">Children</label>
<div class="down" onclick="decreaseCount二(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: 五px">
<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⑶.三.一.slim.min.js"
integrity="sha三8四-q8i/X+九六五DzO0rT七abK四一JStQIAqVgRVzpbzo五smXKp四YfRvH+8abtTE一Pi六jizo"
crossorigin="anonymous"
 ></script>
 <script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/一.一四.七/umd/popper.min.js"
integrity="sha三8四-UO二eT0CpHqdSJQ六hJty五KVphtPhzWj九WO一clHTMGa三JDZwrnQq四sF8六dIHNDz0W一"
crossorigin="anonymous"
 ></script>
 <script
src="https://stackpath.bootstrapcdn.com/bootstrap/四.三.一/js/bootstrap.min.js"
integrity="sha三8四-JjSmVgyd0p三pXB一rRibZUAYoIIy六OrQ六VrjIEaFf/nJGzIxFDsf四x0xIM+B0七jRM"
crossorigin="anonymous"
 ></script>
 <script>

 </script>
  </body>
</html>

佳了闭于价钱与决于无线电输出的选择的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。

1、本站提供的源码不保证资源的完整性以及安全性，不附带任何技术服务！
2、本站提供的模板、软件工具等其他资源，均不包含技术服务，请大家谅解！
2、本站提供的资源仅供下载者参考学习，请勿用于任何商业用途，请24小时内删除！
3、如需商用，请购买正版，由于未及时购买正版发生的侵权行为，与本站无关。
4、如果本站提供的资源侵犯到了您的权益，请邮件联系我们进行处理！


除特别注明外，本站所有文章均为趣模板源码网原创，转载请注明出处来自https://www.qumuban.com/115913.html

收藏
  • 0 个人已赞

相关文章