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 = "";
}

これは、jQuery 関数を呼び出す HTML ファイルにあるものです。

<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 関数を追加できます。

DOM ノードを直接操作するのではなく、jQuery オブジェクトを操作していることを確認する必要があるのは、jQuery 関数を使用する特定のシナリオのみです。したがって、次のようなコードをうまく書くことができます。

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 に答える