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

我有以下代码片段：

var about = "about.html";

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

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

所以当我点击一个按钮，比如，target=about。 但是这样，$dashboard.loadtarget；不加载关于要加载的html文件的变量

那么，如何以这种方式调用变量呢？

您似乎错过了.html部分。试一试

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

但是，假设li元素上只有一个类，最好使用this.className而不是$this.attrclass

编辑：

如果要使用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);
});

您似乎错过了.html部分。试一试

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

但是，假设li元素上只有一个类，最好使用this.className而不是$this.attrclass

编辑：

如果要使用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);
});

或

或

---

如果您是这样问的，您可以这样调用变量：

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

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

---

我们在控制台窗口中。

如果您要求这样调用变量，您可以这样调用：

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

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

---

我们在控制台窗口中。

一个愚蠢的答案：创建一个标记，并将其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);
}

---

愚蠢的回答：创建一个标记，并将其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);
}

---

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

这两个警报都将对引用相应对象的.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"));
});

---

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

这两个警报都将对引用相应对象的.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"));
});

---

您可能需要一个页面扩展名？如果有一个类似于class=myclass关于MyTherClassis的多个类，这将失败。我想澄清一下您的问题，因为我想使用class属性来指示我要引用的变量可能是有序的。您可能需要一个页面扩展名？如果有一个类似于class=myclass关于MyTherClassis的多个类，这将失败。我想澄清一下你的问题，因为我想使用class属性来指示我要引用的变量可能是有序的。好的，这是一个很好的替代方法。但是不可能这样调用一个变量吗？如果它不是一个html页面，我必须调用其他变量。这怎么可能？@user2413035我不确定我是否理解你的意思。编辑回答你的问题吗？好的，这是一个很好的替代方案。但是不可能这样调用一个变量吗？如果它不是一个html页面，我必须调用其他变量。这怎么可能？@user2413035我不确定我是否理解你的意思。编辑是否回答您的问题？如果您不使用数字键，请不要使用数组。var pageReferences={}；是的，这样的数组不是最好的，但也有可能：如果不使用数字键，就不要使用数组。var pageReferences={}；是的，这样的数组不是最好的，但也有可能：