Question

我在jQuery中创建变量，然后创建一个函数以在html中显示它们，然后调用该函数。它不起作用。请记住，我不习惯以这种方式使用javascript，通常只将它用于动画。这是我的代码：

HTML：

<div class="year" id="growth"></div>
<div class="year" id="metro"></div>
<div class="year" id="pioneer"></div>
<div class="year" id="shady"></div>
<div class="year" id="stryker"></div>
<div class="year" id="tri"></div>
<div class="year" id="auto"></div>
<div class="year" id="uranium"></div>
<div class="year" id="valley"></div>

jQuery的：

$(document).ready(function() {

    var growth  = 100;
    var metro   = 100;
    var pioneer = 100;
    var shady   = 100;
    var stryker = 100;
    var tri     = 100;
    var auto    = 100;
    var uranium = 100;
    var valley  = 100;

    function growth() {
        $('#growth').html(growth);
    };
    function metro() {
        $('#metro').html(metro);
    };
    function pioneer() {
        $('#pioneer').html(pioneer);
    };
    function shady() {
        $('#shady').html(shady);
    };
    function stryker() {
        $('#stryker').html(stryker);
    };
    function tri() {
        $('#tri').html(tri);
    };
    function auto() {
        $('#auto').html(auto);
    };
    function uranium() {
        $('#uranium').html(uranium);
    };
    function valley() {
        $('#valley').html(valley);
    };


    growth();
    metro();
    pioneer();
    shady();
    stryker();
    tri();
    auto();
    uranium();
    valley();

});

非常感谢帮助！

Answer 1

问题是，您覆盖了值/函数，因为您使用相同的名称。

var a = 1;
function a() { 
  console.log(a) // function..
}

您应该重命名值的函数或变量，或者使用对象来包装值。

var values = {
  growth:  100,
  metro:   100,
  pioneer: 100,
  shady:   100,
  stryker: 100,
  tri:     100,
  auto:    100,
  uranium: 100,
  valley:  100
}

并在你的功能中使用它

...
function valley() {
   $('#valley').html(values.valley);
}

（DRY） - ＆gt;不要重复自己

就像一个想法一样，你可以通过使用带有泛型函数的循环来使代码变小，因为你的值和id具有相同的名称，所以不是手工编写所有函数，而是创建一个功能，将为所有人做到：

$(document).ready(function() {
  var values = {
    growth:  100,
    metro:   100,
    pioneer: 100,
    shady:   100,
    stryker: 100,
    tri:     100,
    auto:    100,
    uranium: 100,
    valley:  100
  }

  // Generic function
  function setValueForId(id) {
    $('#' + id).html(values[id])
  }

  Object.keys(values).forEach(setValueForId)
})

Answer 2

对于同一范围内的变量和函数，不能使用相同的名称。所以正在发生的事情是你的变量赋值会覆盖你的函数，而且你实际调用growth()时growth的值是100，而不是函数。

重命名所有变量（或所有函数），它应该可以正常工作，例如：

var growthVal  = 100;
var metroVal   = 100;
// etc.

function growth() {
    $('#growth').html(growthVal);
}
function metro() {
    $('#metro').html(metroVal);
}
// etc.

使用重命名的变量进行演示：https://jsfiddle.net/tmju011u/

（另请注意，在函数语句之后你不需要分号，尽管它们实际上并没有受到伤害。）

那么为什么这些值会覆盖函数而不是反过来，即使函数定义在后来呢？因为the way Javascript "hoists" variable and function declarations。所有函数和变量声明都被视为它们出现在其包含范围的顶部，但赋值语句发生在它们出现的代码中。使用var重新声明已存在的变量/函数无效。因此，您的代码被有效地视为如下所示：

var growth = function () { ... }
...
growth = 100;  // overwrite the function value
...
growth();  // error, because growth is 100

创建变量，在函数中使用它们，以及调用函数

2 个答案:

（DRY） - ＆gt;不要重复自己