Question

我正在尝试根据从选项中选择的内容来更改价格...我不知道该怎么做。在我的示例中，我想根据汽车品牌，汽车型号和汽车发动机更改汽车价格。用户选择所有选项后，汽车价格将显示为HTML上的值。

先谢谢了。

 var carPri = $("#carPri h4").val();
 var monPay = parseFloat($("#monPay").val());
 var fnum= 0.2 * carPri / 10 +"%";
 var snum = 0.8 * carPri;
 var aft = carPri - snum;


function calc(){
  var result = carPri - snum;
  $("#doPa h1").text(result +" USD");
}
$("#doPa input").keyup(calc);


function carBrand(){
var brand = $("#brand").val();

if(brand == "BMW") {
	$(".bmwMo").css("display","block");
	$(".tesMo").css("display","none");
	$(".ferrMo").css("display","none");
} else if(brand == "Ferrari"){
	$(".bmwMo").css("display","none");
	$(".tesMo").css("display","none");
	$(".ferrMo").css("display","block");
} else if (brand == "Tesla"){
	$(".bmwMo").css("display","none");
	$(".tesMo").css("display","block");
	$(".ferrMo").css("display","none");
}
}

$("#brand").change(carBrand);

function carModel(){
	var model = $("#model").val();
	if (model == "x1") {
		$("#carImg img").css("display","block");
		$("#carImg img").attr("src","img/x.png");
	}else if (model == "740li") {
		$("#carImg img").attr("src","img/bmw740li.png");
	}else if (model == "320i") {
		$("#carImg img").attr("src","img/bmw320i.png");
	}

	else if (model == "488 Pista") {
		$("#carImg img").css("display","block");
		$("#carImg img").attr("src","img/pista.png");
	}else if (model == "F8 Tributo") {
		$("#carImg img").attr("src","img/tributo.png");
	}else if (model == "Portofino") {
		$("#carImg img").attr("src","img/portofino.png");
	}

	else if (model == "Model S") {
		$("#carImg img").css("display","block");
		$("#carImg img").attr("src","img/models.png");
	}else if (model == "Model 3") {
		$("#carImg img").attr("src","img/model3.png");
	}else if (model == "Model X") {
		$("#carImg img").attr("src","img/modelx.png");
	}

}
$("#model").change(carModel);

function carEng(){
	var engine = $("#engine").val();

	if (engine == "Petrol") {
			model == "x1"
			$("#carPri h4").text("8000 USD");

	}else if (engine == "Petrol") {
		model == "740li"
		$("#carPri h4").text("8500 USD");
	}
}

$("#engine").change(carEng);

/*
function carModel(){
	var model = $("#model").val();
	var carImg = $("#carImg").val();
 	var engine = $("#engine").val();

	if (model == "X1") {
		if (engine == "Petrol") {
			$("#carImg img").attr("src","img/x.png");
          	carPri = 80000;
		}else if (model == "740li") {
			if (engine == "Petrol") {
				$("#carImg img").attr("src","img/bmw740li.png");
				carPri = 90000;
			}
		}else if (model == "320i") {
			if (engine == "Petrol") {
				$("#carImg img").attr("src","img/bmw320i.png");
				carPri = 60000;
			}
		}
	} else if (model == "X1") {
		$("#carImg img").attr("src","img/x.png");
		if (engine == "Diesel") {
			carPri = 75000;
		}else if (model=="740li") {
			$("#carImg img").attr("src","img/bmw740li.png");
		 if (engine == "Diesel"){
		 	carPri = 85000;
		 }	
		}else if (model == "320i") {
			$("#carImg img").attr("src","img/bmw320i.png");
			if (engine == "Diesel"){
		 	carPri = 55000;
		 }
	
		}
	} else if (model == "488 Pista") {
		$("#carImg img").attr("src","img/pista.png");
		if (engine == "Petrol") {
          carPri = 1000000;
		}else if (model == "F8 Tributo") {
			$("#carImg img").attr("src","img/tributo.png");
			if (engine == "Petrol") {
				carPri = 1500000;
			}
		}else if (model == "Portofino") {
			$("#carImg img").attr("src","img/portofino.png");
			if (engine == "Petrol") {
				carPri = 2050000;
			}
		}
	} else if (model == "488 Pista") {
		$("#carImg img").attr("src","img/pista.png");
		if (engine == "Diesel") {
			carPri = 990000;
		}else if (model=="F8 Tributo") {
			$("#carImg img").attr("src","img/tributo.png");
			if (engine == "Diesel") {
				carPri = 1450000;
			}
			
		}else if (model == "Portofino") {
			$("#carImg img").attr("src","img/portofino.png");
			if (engine == "Diesel"){
				carPri = 2000000;
			}	
		}
		} else if (model == "Model S") {
		$("#carImg img").attr("src","img/models.png");
		if (engine == "Petrol") {
          carPri = 800000;
		}else if (model == "Model 3") {
			$("#carImg img").attr("src","img/model3.png");
			if (engine == "Petrol") {
				carPri = 700000;
			}
		}else if (model == "Model X") {
			$("#carImg img").attr("src","img/modelx.png");
			if (engine == "Petrol") {
				carPri = 750000;
			}
		}
	} else if (model == "Model S") {
		$("#carImg img").attr("src","img/models.png");
		if (engine == "Diesel") {
			carPri = 795000;
		}else if (model=="Model 3") {
			$("#carImg img").attr("src","img/model3.png");
			if (engine == "Diesel") {
				carPri = 695000;
			}
			
		}else if (model == "Model X") {
			$("#carImg img").attr("src","img/modelx.png");
			if (engine == "Diesel"){
				carPri = 745000;
			}	
		}
	}

	
}

$("#model").change(carModel);
*/

function month (){
	 	var downPay = parseFloat($("#downPay").val());
	if (monPay == "12") {
		var be = aft * 0.1;
	}else if (monPay == "24") {
		var be = aft * 0.2;
	}else if (monPay == "36") {
		var be = aft * 0.3;
	}
	var resultMon = parseFloat(aft + be);
	$("#result").text(resultMon +" USD");
	console.log(resultMon);
}

$("#result").change(month);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
   <div>
      <label>Brand</label>
      <select id="brand">
         <option disabled selected>Select The Brand</option>
         <option value="BMW">BMW</option>
         <option value="Ferrari">Ferrari</option>
         <option value="Tesla">Tesla</option>
      </select>
   </div>
   <div >
      <label>Model</label>
      <select id="model">
         <option disabled selected>Select The Model</option>
         <option class="bmwMo" value="x1">X1</option>
         <option class="bmwMo" value="740li">740li</option>
         <option class="bmwMo" value="320i">320i </option>
         <option class="ferrMo" value="488 Pista">488 Pista</option>
         <option class="ferrMo" value="F8 Tributo">F8 Tributo</option>
         <option class="ferrMo" value="Portofino">Portofino</option>
         <option class="tesMo" value="Model S">Model S</option>
         <option class="tesMo" value="Model 3">Model 3</option>
         <option class="tesMo" value="Model X">Model X</option>
      </select>
   </div>
   <div id="carImg">
      <img alt="car image">
   </div>
   <div>
      <label>Engine</label>
      <select id="engine">
         <option disabled selected>Select The Model</option>
         <option>Petrol</option>
         <option>Diesel</option>
      </select>
   </div>
   <div id="carPri">
      <label>Price</label>
      <h4></h4>
   </div>
   <div id="doPa">
      <label>Down Payment</label>
      <input type="text" name="downPayment" id="downPay">
      <input type="text" name="downPayment" id="doPayPer">
      <h1></h1>
   </div>
   <div id="monPay">
      <label>Month Payment</label>
      <select>
         <option disabled selected>Select Month Payment </option>
         <option value="12">12</option>
         <option value="24">24</option>
         <option value="36">36</option>
      </select>
   </div>
</form>

Answer 1

    function carEng() {
  var engine = $('#engine').val();

  if (engine == 'Petrol') {
    model == 'x1';
    $('#carPri h4').text('8000 USD');
  } else if (engine == 'Diesel') {
    model == '740li';
    $('#carPri h4').text('8500 USD');
  }
}

似乎您忘记检查“柴油” 但是我看不到模型和品牌影响价格计算的逻辑

根据选项jQuery更改价格

1 个答案: