根据没有按钮的选择计算价格-前端问题

calculate price depend on selection without button(根据没有按钮的选择计算价格)

本文介绍了根据没有按钮的选择计算价格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想将价格和乘法与IF语句相加，以澄清以下是变量的一些价格私人=成人100，儿童50或共享=成人40，儿童30 成人ATV=100儿童80或无ATV=0 如果唯一的成人在网上预订，我希望价格的反应是两种选择的总和乘以成人的数量示例与亚视分享的成人书籍SO 40+100=140*成人人数

如果成人和儿童与亚视共享预订，那么它的反应应该是 40+100=140*成人人数 30+80=110*儿童数量结果应为总和(110*儿童数量)+(140*成人数量) 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<!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;
    }
    
    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;
    }
    
    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 class="total Price"></label> </h2>
        <div class="counter1">
          <Label class="Adults">Adults</Label>
          <div class='down' onclick='decreaseCount(event, this)'>-</div>
          <input 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 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">
            <label for="private">Private</label>
            <input type="radio" name="occupancy" id="shared">
            <label for="shared">Shared</label>
          </div>
          <div>
            <input type="radio" name="atv" id="withatv" checked="checked">
            <label for="withatv">With ATV</label>
            <input type="radio" name="atv" id="withoutatv">
            <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>
    function increaseCount(e, el) {
      var input = el.previousElementSibling;
      var value = parseInt(input.value, 10);
      value = isNaN(value) ? 0 : value;
      value++;
      input.value = value;
    }

    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;
      }
    }

    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;
      }
    }

    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;
    }
  </script>
</body>

</html>

推荐答案

我做了多次更改，以便能够以更轻松的方式处理此问题：

第0步-HTML在adults、children输入中包含id(以获取这些值)
步骤1-Html每次修改(更改儿童/成人、ATV/无ATV、私有/共享)后呈现不完全
第2步-JS计算新合计并呈现

带示例的Plnkr：https://plnkr.co/edit/XOebeFyHNXFswNI4

第0步&；1：html：

                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>

第二步：

      function calculateTotal() {
        // Define based Prices
        const privateAdultPrice = 100;
        const sharedAdultPrice = 40;
        const privateChildrenPrice = 50;
        const sharedChildrenPrice = 30;

        const withAtvAdultPrice = 100;
        const withAtvChildrenPrice = 80;

        const noAtvPrice = 0;

        // Get the amount of adults and guests
        const adults = +document.querySelector('#adults').value;
        const children = +document.querySelector('#children').value;

        // Get the type of trip
        const isPrivate = document.getElementById('private').checked;
        const isWithAtv = document.getElementById('withatv').checked;        

        // Calculate the specific charge per type of user and type of trip
        const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
        const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
        // Calculate the specific charge per type of user and the vehicule
        const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
        const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice;      

        // Finally, do the maths
        const adultPrice = adults * (adultTripPrice + adultVehiclePrice)
        const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice)

        // return the value
        return adultPrice + childrenPrice;                  
      }

      function updateTotal() {
        const total = calculateTotal();
        console.log(total);
        document.querySelector('#totalPrice').innerHTML = total;
      }

这篇关于根据没有按钮的选择计算价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！