Question

我有以下代码片段：

var about = "about.html";

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

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

因此，当我点击<li class="about">之类的按钮时，target = 关于。
但是这样，$("#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

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

或

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

Answer 4

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

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

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

we are here在控制台窗口中。

Answer 5

您可以将“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"));
});

使用参数调用Javascript函数并使用参数作为变量名称

5 个答案: