将Javascript能量计算器转换为jQuery

Question

我已经在Javascript中编写了能量计算器的代码，但我希望用jQuery编写代码，这样我就可以有一些很酷的效果，比如show / hide等。

这是原始的Javascript代码。

function validateForm(){
  hours_used = document.getElementById('hours').value;
  //validation
  if(hours_used < 1 || isNaN(hours_used) || hours_used == ""){
    alert('Please enter a valid number for hours used per day');
    document.getElementById('hours').value = " ";
    document.getElementById('hours').focus();
    return false;
  }else if (hours_used > 24){
    alert('There is only 24 hours in a day');
    document.getElementById('hours').value = " ";
    document.getElementById('hours').focus();
    return false;
  }else{
    return getEnergyCosts();
  }
} //end validateForm function
//getEnergyCosts function
//calculates energy costs for appliance
//based on hours used per day
function getEnergyCosts(){
  watts = document.getElementById('appliance').value;
  hours_used = document.getElementById('hours').value;
  //cost per kilowatt divide by 100 to get pence figure
  var cpk = 14.5/100;
  //divide watts by 1000 to get kw
  var kilowatt = watts / 1000;
  kw_used = hours_used * kilowatt;
  //calculate costs
  cost_per_day = kw_used * cpk;
  cost_per_week = cost_per_day * 7;
  cost_per_month = cost_per_week * 4;
  cost_per_year = cost_per_month * 12;
  document.getElementById('kilowatts_used').innerHTML = kw_used.toFixed(2);
  document.getElementById('cost_day').innerHTML = "£"+cost_per_day.toFixed(2)+"p";
  document.getElementById('cost_week').innerHTML = "£"+cost_per_week.toFixed(2)+"p";
  document.getElementById('cost_month').innerHTML = "£"+cost_per_month.toFixed(2)+"p";
  document.getElementById('cost_year').innerHTML = "£"+cost_per_year.toFixed(2)+"p";
  //return false to stop form reloading
  return false;
}
function reset_form(){
  //resets variables when reset button is clicked
  //possibly don't need this
  watts = 0;
  kw_used = 0;
  cost_per_day = 0;
  cost_per_week = 0;
  cost_per_month = 0;
  cost_per_year = 0;
  document.getElementById('kilowatts_used').innerHTML = "";
  document.getElementById('cost_day').innerHTML = "";
  document.getElementById('cost_week').innerHTML = "";
  document.getElementById('cost_month').innerHTML = "";
  document.getElementById('cost_year').innerHTML = "";
}

这是我在jQuery中到目前为止所做的事情，遗憾的是，我对jQuery中创建函数（或插件，因为这基本上是一个插件）不太熟悉，所以它不能正常工作应该。表单验证部分似乎有效，即如果我将小时文本框保留为黑色或者不输入数字，它将返回警告框，但getEnergyCosts函数不能正常工作。包含结果的div将不会显示，并且表单将刷新URL中所选项的值。基本上我不认为getEnergyCosts函数正在运行。

我似乎唯一得到的错误是此行的参考错误无效左侧：

   $('#kilowatts_used').html() = kw_used.toFixed(2);

任何人都可以给我一些关于我做错的提示吗？感谢。

jQuery.fn.validateForm = function() {
  var hours_used = parseInt($('#hours').val());
  //validation
  if(hours_used < 1 || isNaN(hours_used) || hours_used == ""){
    alert('Please enter a valid number for hours used per day');
    document.getElementById('hours').value = " ";
    document.getElementById('hours').focus();
    return false;
  }else if (hours_used > 24){
    alert('There is only 24 hours in a day');
    document.getElementById('hours').value = " ";
    document.getElementById('hours').focus();
  }else{
    return $(this).getEnergyCosts();
  }
} //end validateForm function
//getEnergyCosts function
//calculates energy costs for appliance
//based on hours used per day
jQuery.fn.getEnergyCosts = function() {
  var watts = parseInt($('#appliance').val());
  var hours_used = parseInt($('#hours').val());
  //cost per kilowatt divide by 100 to get pence figure
  var cpk = 14.5/100;
  //divide watts by 1000 to get kw
  var kilowatt = watts / 1000;
  kw_used = hours_used * kilowatt;
  //calculate costs
  cost_per_day = kw_used * cpk;
  cost_per_week = cost_per_day * 7;
  cost_per_month = cost_per_week * 4;
  cost_per_year = cost_per_month * 12;
  $('#kilowatts_used').html() = kw_used.toFixed(2);
  $('#cost_day').html() = "£"+cost_per_day.toFixed(2)+"p";
  $('#cost_week').html() = "£"+cost_per_week.toFixed(2)+"p";
  $('#cost_month').html() = "£"+cost_per_month.toFixed(2)+"p";
  $('#cost_year').html() = "£"+cost_per_year.toFixed(2)+"p";
  //return false to stop from reloading
  $('#results').show(fast);
}
jQuery.fn.reset_form = function() {
  //resets variables when reset button is clicked
  //possibly don't need this
  watts = 0;
  kw_used = 0;
  cost_per_day = 0;
  cost_per_week = 0;
  cost_per_month = 0;
  cost_per_year = 0;
  document.getElementById('kilowatts_used').innerHTML = "";
  document.getElementById('cost_day').innerHTML = "";
  document.getElementById('cost_week').innerHTML = "";
  document.getElementById('cost_month').innerHTML = "";
  document.getElementById('cost_year').innerHTML = "";
}

这就是我在HTML文件中调用jQuery函数的原因：

<script type="text/javascript">
  $(document).ready(function(){
    $('#results').hide();
    $('.submit').click(function(){
      $(this).validateForm();
      return false;
    });
    $('.reset').click(function(){
      reset_form();
      $('#results').hide();
    });
  });
</script>

作为参考，这是表格的HTML代码：

<div id="energy-calculator">
  <form id="e-calc">
    <div class="element">
      <label for="appliance">Select an appliance</label>
      <select name="appliance" id="appliance" tabindex="1">
        <option value="2000">Oven</option>
        <option value="1100">Microwave</option>
        <option value="1500">Portable Heater</option>
        <option value="200">Desktop Computer</option>
        <option value="40">Laptop Computer</option>
        <option value="150">Games Consoles (PS3 / X Box)</option>
        <option value="16">Games Console (Wii)</option>
        <option value="70">Television 19 inch</option>
        <option value="150">Television 25 inch</option>
        <option value="450">Hoover</option>
        <option value="500">Fridge/Freezer</option>
        <option value="3500">Tumble Dryer</option>
        <option value="700">Washing Machine</option>
        <option value="1350">Dishwasher</option>
        <option value="11">Energy Saving Light Bulb</option>
        <option value="23">Digital TV Box</option>
        <option value="1000">Hair Dryer</option>
        <option value="123">Straighteners</option>
        <option value="35">Stereo System</option>
        <option value="35">DVD Player</option>
      </select>
    </div>
    <div class="element">
      <label for="hours">How many hours on average do you use the appliance per day?</label>
      <input type="text" id="hours" tabindex="2" size="2"/>
    </div>
    <div class="element">
      <input type="submit" value="Get Costs" class="submit" tabindex="3"/>
    </div>
    <!-- results -->
    <div id="results">
      <div class="element">
        <span class="label">Kilowatts used per day:</span>
        <div id="kilowatts_used" class="results_box"></div>
      </div>
      <div class="element">
        <span class="label">Total cost per day is:</span>
        <div id="cost_day" class="results_box"></div>
      </div>
      <div class="element">
        <span class="label">Total cost per week is:</span>
        <div id="cost_week" class="results_box"></div>
      </div>
      <div class="element">
        <span class="label">Total cost per month is:</span>
        <div id="cost_month" class="results_box"></div>
      </div>
      <div class="element">
        <span class="label">Total cost per year is:</span>
        <div id="cost_year" class="results_box"></div>
      </div>
      <div class="element">
        <input type="reset" value="Reset Form" class="reset" />
      </div>
    </div>
  </form>
</div>

Answer 1

.html是一个函数，您需要传递一个值，而不是分配给它。

$('#kilowatts_used').html(kw_used.toFixed(2));

如果您只是设置文字，而不是附加实际的HTML内容，我建议您改为使用.text：

$('#kilowatts_used').text(kw_used.toFixed(2));

此外，jQuery位于JavaScript之上。您不必将现有代码转换为使用更多jQuery，以便利用jQuery函数进行显示和隐藏。您可以在方便时添加jQuery函数，无论脚本的其余部分是如何编写的。

只有在特定场景中，您需要使用jQuery函数，以确保您使用的是jQuery对象，而不是直接使用DOM节点。所以你可以编写如下代码：

document.getElementById('kilowatts_used').innerHTML = 'xxx';
$('#kilowatts_used').show();

或者：

var kw_used = document.getElementById('kilowatts_used');
kw_used.innerHTML = 'xxx';
$(kw_used).show();