javascript - 使用参数调用 Javascript 函数并将参数用作变量名

Question

我有以下代码片段：

var about = "about.html";

function loadPage(target){
    $("#dashboard").load(target);
}

$(".nav li").click(function(){
    loadPage($(this).attr("class"));
});

所以当我点击一个按钮时<li class="about">，targetis = about。
但是这样，$("#dashboard").load(target);不会加载关于哪个是我要加载的 html 文件的变量。

那么怎么可能以这种方式调用变量呢？

Answer 1

你似乎错过了这个.html部分。尝试

$("#dashboard").load(target+'.html');

但是，假设你的li元素只有一个类，你最好使用this.className而不是$(this).attr("class").

编辑 ：

如果你想使用你的about变量，你可以这样做：

$("#dashboard").load(window[target]);

但因此有一张地图会更干净：

var pages = {
   'about': 'about.html',
   'home': 'welcome.jsp'
}
function loadPage(target){
    $("#dashboard").load(pages[target]);
}
$(".nav li").click(function(){
    loadPage(this.className);
});

Answer 2

一个愚蠢的答案：创建一个<a>标签，并将其href属性设置为正确的值。

否则 ：

在 javascript 中存储key: values对的标准方法是使用普通对象：

var urls = {};
urls['about'] = 'mysuperduperurlforabout.html';

function loadPage(target) {
    var url = urls[target];
    //maybe check if url is defined ?

    $('#dashboard').load(url);
}

Answer 3

您可以将“about”作为对象或数组引用，类似于：

var pageReferences = [];
pageReferences["about"] = "about.html";

var otherReference = {
    "about": "about.html"
};

function loadPage(target) {
    alert(pageReferences[target]);
    alert(otherReference[target]);
    $("#dashboard").load(target);
}

$(".nav li").click(function () {
    loadPage($(this).attr("class"));
});

这两个警报都会提醒“about.html”引用适当的对象。

编辑：如果您希望根据标记填充对象，您可以执行以下操作：

var otherReference = {};

$(document).ready(function () {
    $('.nav').find('li').each(function () {
        var me = $(this).attr('class');
        otherReference[me] = me + ".html";
    });
});

您甚至可以将扩展存储在附加属性中：

var otherReference = {};

$(document).ready(function () {
    $('.nav').find('li').each(function () {
        var me = $(this).attr('class');
        otherReference[me] = me + "." + $(this).attr("extension");
    });
});

最好将页面引用简单地放在数据元素中：

<li class="myli" data-pagetoload="about.html">Howdy</li>

$(".nav li").click(function () {
    loadPage($(this).data("pagetoload"));
});

Answer 4

$(".nav li").click(function(){
    loadPage($(this).attr("class") + ".html");
});

或者

$("#dashboard").load(target+".html");

Answer 5

您可以这样调用变量（如果这是您所要求的）：

var test = 'we are here';
var x = 'test';
console.log(window[x]);

它类似于 PHP 中的 $$。输出将是：

we are here在控制台窗口中。