javascript - 用两个值计算价格

Question

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

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

这是我的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

尝试使用 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>