1

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

这是原始的 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>
4

1 回答 1

2

.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();
于 2012-11-19T15:04:14.800 回答