jquery 两个相同的blur()调用,一个工作,一个不工作

jogvjijk  于 2023-06-29  发布在  jQuery
关注(0)|答案(1)|浏览(125)

我调用了两个非常相似的blur()函数,其中一个可以工作,另一个不能工作。这两个调用之间的唯一区别是id的名称。一个名为lighting-upgrade,一个名为hvac-upgrade。我看不出id=lighting-upgrade工作而id=hvac-upgrade不工作的原因。
HTML中的<select>

<select id="lighting-upgrade" name="lighting">
  <optgroup>
    <option value="option1">Incandescent</option>
    <option value="option2">Fluorescent</option>
  <optgroup>
</select>
<input id="insulation-cost" type="number" name="insulation-cost">

<select id="hvac-upgrade" name="hvac">
  <optgroup>
    <option value="option1">RTU-80-Furnace</option>
    <option value="option2">RTU-92-Furnace</option>
  <optgroup>
</select>
<input id="lighting-cost" type="number" name="lighting-cost">

我使用的常量:

const lighting_upgrade = {
    option1: {type:"Incandescent", savings:0.1},
    option2: {type:"Fluorescent", savings:0.21}
};
const hvac_upgrade = {
  option1: {type:"RTU-80-Furnace", savings:0.1},
  option2: {type:"RTU-92-Furnace", savings:0.18}
};

JavaScript调用:

此呼叫有效

$("#lighting-cost").blur(function() {
    var option_selected  = $("#lighting-upgrade option:selected").val();
    var percent_savings  = lighting_upgrade[option_selected].savings;

此呼叫无法工作

$("#hvac-cost").blur(function() {
    var option_selected  = $("#hvac-upgrade option:selected").val();
    var percent_savings  = hvac_upgrade[option_selected].savings;

使用console.log,这是我得到的错误:

tool.js:155 Uncaught TypeError: Cannot read properties of undefined (reading 'savings')
    at HTMLInputElement.<anonymous>

我没发现问题所在。

const lighting_upgrade = {
    option1: {type:"Incandescent", savings:0.1},
    option2: {type:"Fluorescent", savings:0.21}
};

const hvac_upgrade = {
  option1: {type:"RTU-80-Furnace", savings:0.1},
  option2: {type:"RTU-92-Furnace", savings:0.18}
};

$(function() {
  $("#lighting-cost").blur(function() {
    var option_selected  = 
    $("#lighting-upgrade option:selected").val();
    var percent_savings  =
    lighting_upgrade[option_selected].savings;
    $("#result1").text(percent_savings);
  });
  
  $("#hvac-cost").blur(function() {
    var option_selected  = 
    $("#hvac-upgrade option:selected").val();
    var percent_savings  =
    hvac_upgrade[option_selected].savings;
    $("#result2").text(percent_savings);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span>Lighting:</span>
<select id="lighting-upgrade" name="lighting">
  <optgroup>
    <option value=""></option>
    <option value="option1">Incandescent</option>
    <option value="option2">Fluorescent</option>
  <optgroup>
</select>
<input id="insulation-cost" type="number" name="insulation-cost">
<div id="result1">Lighting Result</div>
</div>
<div>
<span>HVAC:</span>
<select id="hvac-upgrade" name="hvac">
  <optgroup>
    <option value=""></option>
    <option value="option1">RTU-80-Furnace</option>
    <option value="option2">RTU-92-Furnace</option>
  <optgroup>
</select>
<input id="lighting-cost" type="number" name="lighting-cost">
<div id="result2">HVAC Result</div>
</div>
nsc4cvqm

nsc4cvqm1#

你的代码是工作,但你搞砸了你的HTML中的元素的id。以下是更新的片段:

const lighting_upgrade = {
    option1: {type:"Incandescent", savings:0.1},
    option2: {type:"Fluorescent", savings:0.21}
};

const hvac_upgrade = {
  option1: {type:"RTU-80-Furnace", savings:0.1},
  option2: {type:"RTU-92-Furnace", savings:0.18}
};

$(function() {
  $("#lighting-cost").blur(function() {
    var option_selected  = 
    $("#lighting-upgrade option:selected").val();
    var percent_savings  =
    lighting_upgrade[option_selected].savings;
    $("#result1").text(percent_savings);
  });
  
  $("#hvac-cost").blur(function() {
    var option_selected  = 
    $("#hvac-upgrade option:selected").val();
    var percent_savings  =
    hvac_upgrade[option_selected].savings;
    $("#result2").text(percent_savings);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span>Lighting:</span>
<select id="lighting-upgrade" name="lighting">
  <optgroup>
    <option value=""></option>
    <option value="option1">Incandescent</option>
    <option value="option2">Fluorescent</option>
  <optgroup>
</select>
<!-- it was this HTML but in JavaScript code you used $('#lighting-cost')
<input id="insulation-cost" type="number" name="insulation-cost">
-->
<input id="lighting-cost" type="number" name="insulation-cost">
<div id="result1">Lighting Result</div>
</div>
<div>
<span>HVAC:</span>
<select id="hvac-upgrade" name="hvac">
  <optgroup>
    <option value=""></option>
    <option value="option1">RTU-80-Furnace</option>
    <option value="option2">RTU-92-Furnace</option>
  <optgroup>
</select>
<!-- it was this HTML but in your JavaScript you use $('#hvac-cost');
<input id="lighting-cost" type="number" name="lighting-cost">
-->
<input id="hvac-cost" type="number" name="lighting-cost">
<div id="result2">HVAC Result</div>
</div>

相关问题