javascript - 创建变量、在函数中使用变量以及调用函数

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) -> 不要重复自己

作为一个想法，您可以通过使用具有通用函数的循环来使代码更小，因为您的值和 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)
})