Question

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

这是HTML：

输入

我在旅行英里

我的车平均加仑英里

一公升的当前价格是£

结果：

你会用约。 X 加仑，或 ž 升

这将花费你： £ý

我必须包含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/

让我知道。

气体计算器jquery app

输入

结果：

1 个答案: