用两个值计算价格

Question

所以我有这样的东西...

我有一个表格，您可以在其中 select 您的性别并输入您的体重。每个性别都有不同的价格范围，例如，如果您是男性且体重大于 200，则价格为 20，如果您是女性且体重大于 200，则价格为 15，如果您是男性且体重小于200以下你的价格是10，女性如果她的体重小于200她的价格是7。我一直在尝试使用 jquery 和 PHP 使其成为可能，但它似乎只适用于 select 选项并且不适用于输入数据。

这是我的index.php

   <div class="container">

      <div class="row">
       <div class="col-xs-3 col-xs-offset-2">
        <h3>gender:</h3>
        <!-- select gender -->
         <select class="form-control" id="gender">
         <option>female</option>
        <option>male</option>
         </select>
        </div>
       <div class="col-xs-3">
         <h3>weight </h3>
          <!-- input weight -->
       <input type="" name="weight" id="weight">
        </div>

         </div>
      <div id="ticketInfo">
        <h3 id="yourTicket">No gender Selected</h3>
     </div>
     </div>
    <script src="js/jquery-1.12.2.js"></script>
   <script src="js/bootstrap.js"></script>
     <script src="js/scripts.js"></script>

这是我的脚本

  function Ticket(gender, weight) {
  this.gender=gender;
  this.weight=weight;

     }

   Ticket.prototype.getPrice=function() {
     var price;

   if((this.gender==="male ")||(this.weight=>"200 ")){
       price=20;
        }
    if((this.gender==="female ")||(this.weight=>"200 ")) {
      price=15;
     }
     if((this.gender==="male ")||(this.weight=<"200 ")) {
    price=10;
    }
   if((this.gender==="female ")||(this.weight=<"200 ")) {
    price=7;
   }

  return price;
 }



$("select").change(function() {
  var genderOptions=[];
  $("select option:selected").each(function() {
   genderOptions.push($(this).text() + " ");
 });
 var newTicket = new 
 Ticket(genderOptions[0],genderOptions[1],genderOptions[2]);
 $("#yourTicket").text(newTicket.gender + newTicket.weight + " $" + 
 newTicket.getPrice().toFixed(2));
   });

最后尝试将价格乘以重量。任何帮助将不胜感激，提前致谢。

Answer 1

你的问题是unclear.as根据我的理解我给你一个解决方案。

你的if条件有误。例如。您需要检查为 >= 而不是检查为 => 这是错误的。
也应该是&&而不是||
并且您错过了将权重变量传递给 Ticket class。
删除 if 条件中 200 左右的引号
您在 genderOptions 中推送了一个 space。所以我删除了它。

我解决了这些问题。

function Ticket(gender, weight) {
  this.gender=gender;
  this.weight=weight;
}

Ticket.prototype.getPrice=function() {
  var price;
  if(this.gender==="male" && this.weight > 200 ){
    price=20;
  }
  else if(this.gender==="female" && this.weight > 200 ) {
    price=15;
  }
  else if(this.gender==="male" && this.weight <= 200 ) {
    price=10;
  }
  else if(this.gender==="female" && this.weight <= 200 ) {
    price=7;
  }
  return price;
}



$("select").change(function() {
  var genderOptions=[];
  $("select option:selected").each(function() {
    genderOptions.push($(this).text());
  });

  var newTicket = new Ticket(genderOptions[0] , $('#weight').val());
  var multiplyVal = newTicket.weight * newTicket.getPrice();
  $("#yourTicket").text(newTicket.gender + newTicket.weight + " $" + newTicket.getPrice().toFixed(2) + " and your multiplied value is " + multiplyVal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <div class="row">
       <div class="col-xs-3 col-xs-offset-2">
        <h3>gender:</h3>
        <!-- select gender -->
         <select class="form-control" id="gender">
         <option value="female">female</option>
        <option value="male">male</option>
         </select>
        </div>
       <div class="col-xs-3">
         <h3>weight </h3>
          <!-- input weight -->
       <input type="" name="weight" id="weight">
        </div>

         </div>
      <div id="ticketInfo">
        <h3 id="yourTicket">No gender Selected</h3>
     </div>
     </div>

Answer 2

试试 Syed 的解决方案。

逻辑应该使用 && 运算符而不是 ||

    function Ticket(gender, weight) {
        this.gender=gender;
      this.weight=weight;
    }

    Ticket.prototype.getPrice=function() {
      var price;
      if(this.gender==="male" && this.weight > 200){
    price=20;
  }
  else if(this.gender==="female" && this.weight > 200) {
    price=15;
  }
  else if(this.gender==="male" && this.weight <= 200) {
    price=10;
  }
  else if(this.gender==="female" && this.weight <= 200) {
    price=7;

      }
      return price;
    }

    $("#calculate").click(function() {
        var genderOptions=[];
        $("select option:selected").each(function() {
            genderOptions.push($(this).text() + " ");
        });

        var newTicket = new 
        Ticket($("#gender").val(),$('#weight').val());
        var multiplyVal = newTicket.weight * newTicket.getPrice();
        $("#yourTicket").text("Gender: " + newTicket.gender + " Weight: " + newTicket.weight + " $" + newTicket.getPrice().toFixed(2) + " and your multiplied value is " + multiplyVal);
    });

<div class="col-xs-3 col-xs-offset-2">
  <h3>gender:</h3>
  <!-- select gender -->
  <select class="form-control" id="gender"> 
    <option value="female" selected>female</option>
    <option value="male">male</option>
  </select>
</div>
<div class="col-xs-3">
  <h3>weight </h3>
  <!-- input weight -->
  <input type="" name="weight" id="weight">
</div>
<div id="ticketInfo">
  <h3 id="yourTicket">No gender Selected</h3>
</div>
<button id="calculate" >Calculate</button>

Answer 3

去除性别options.push.Afterwards中添加的空字符串，正常工作

genderOptions.push($(this).text())

用两个值计算价格

calculating price with two values

javascript

php

ajax

jquery

jquery-ui