我在 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();
});
非常感谢您的帮助!
最佳答案
问题是,您覆盖了值/函数,因为您使用了相同的名称。
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)
})
关于javascript - 创建变量、在函数中使用变量以及调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38340122/