轉換一個Javascript能源計算器的jQuery

我寫的代碼在JavaScript中的能量計算器，但我期待它寫在jQuery的，所以我可以有一個像顯示/隱藏一些很酷的效果，等轉換一個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>

來源

2012-11-19 user1836123

原則之一：如果它工作在普通的JavaScript，請不要將其更改爲jQuery的。「如果它沒有損壞，請不要修理它。」 –

.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-19 15:04:14

轉換一個Javascript能源計算器的jQuery

回答

相關問題