javascript - 天然气计算器jquery应用程序

Question

我正在尝试对此应用程序进行更改 http://www.nextworldweb.co.uk/blog/2011/02/fuel-cost-calculator-with-code-js-jquery/从英里到公里，但不起作用。我试图将汽油的平均价格更改为智利比索(550 美元)，我只想显示升，而不是显示加仑。

这是 HTML:

输入:

我正在旅行 英里

我的车平均 英里 等于 加仑

目前每升的价格是 £

结果:

您将使用大约。 X 加仑，或 Z 升

这将花费你: £Y

我必须包含 jQuery，这是使用的 jQuery 代码。

//called when the document is ready
$(document).ready(function() {

  var fuelCostCalcer = {
    //define the input fields
    inputAr: new Array('miles', 'mpg', 'cost_per_litre'),

    //define the results fields
    resultAr: new Array('gallons_used', 'litres_used', 'total_cost'),

    //function to init object, set listeners, make first results
    init: function() {

      var $fi;
      //for each input field, add a change listener
      for (var i in this.inputAr) {
        $fi = $('#' + this.inputAr[i] + '_fi'); //select the field as jQuery object
        //bind the events, triggered when value changes
        $fi.bind('keyup change', this.doCalc);
      }
      //trigger change on the last field, to init the result
      $fi.trigger('change');
    },

    //triggerd by field value change
    doCalc: function(eventObj) {
      /* CHECK AND SET THE INPUT VARS */
      //the inputVars obj
      var inputVars = {};
      //do input validation
      var isValid = true;
      for (var i in fuelCostCalcer.inputAr) {
        var fiId = fuelCostCalcer.inputAr[i]; //get field ID
        var val = $('#' + fiId + '_fi').val(); //get the value from the input field
        //if is in valid value
        if (isNaN(parseFloat(val)) || val < 0 || val > 10000000) {
          isValid = false;
          break;
        }
        //else set as property in this object
        else
          inputVars[fiId] = val;
      }

      /* SET THE RESULT VARS */
      //the resultVars obj
      var resultVars = {};
      //if inputs are valid then calculate the results
      if (isValid) {
        var milesPerLitre = inputVars['mpg'] / 4.54609188; //4.5 is the litres in a gallon
        resultVars['gallons_used'] = inputVars['miles'] / inputVars['mpg'];
        resultVars['litres_used'] = inputVars['miles'] / milesPerLitre;
        resultVars['total_cost'] = resultVars['litres_used'] * inputVars['cost_per_litre'];
      }
      //not valid, so set all result vars to 0
      else {
        for (var i in fuelCostCalcer.resultAr)
          resultVars[fuelCostCalcer.resultAr[i]] = 0;
      }

      /* SET RESULTS IN TO HTML */
      for (var i in fuelCostCalcer.resultAr) {
        var laId = fuelCostCalcer.resultAr[i]; //get label/span ID
        $('#' + laId + '_la').text(resultVars[laId].toFixed(2));
      }
    }
  };

  fuelCostCalcer.init();
});

Answer 1

我让它在 JSFiddle 上工作。

那我不知道你出了什么问题。也许你的 html 代码中的元素没有用好的 id 定义？

顺便说一句，我将函数对象 FuelCostCalcer 保留在 document.ready 之外，而将 init 保留在其中，因为您的对象始终与 html 页面一起存在。

$(document).ready( function(){
  fuelCostCalcer.init();
});
var fuelCostCalcer = {
   ...
};

http://jsfiddle.net/tds84qp1/

请告诉我。