Question

所以我有这样的东西... 我有一个表格，您可以在其中选择性别并输入体重。每个性别都有不同的价格范围，例如，如果您的男性体重超过200，则您的价格为20；如果您的女性体重超过200，则您的价格为15；如果您的男性体重低于200，则价格为15如果您的体重小于200，则您的价格为10；对于体重小于200的女性，您的价格为7。我一直在尝试使jquery和PHP成为可能，但它似乎只能与select选项一起使用，而不适用于输入数据。

这是我的index.php

      <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

您的问题不清楚。据我了解，我为您提供了解决方案。

您的if条件有误。例如您需要以>=进行检查，而不是=>进行了检查。
也应该是&&而不是||
您错过了将weight变量传递给Ticket类的方法。
在您的if条件中删除大约200个报价
您已在genderOptions中加了空格。所以我删除了它。

我解决了这些问题。

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

删除性别选项中添加的空字符串。push.After，工作正常

genderOptions.push（$（this）.text（））

用两个值计算价格

3 个答案: