Question

我有一些存储在外部文件中的变量（settings.js）：

var company = "Apple";
var city = "Toronto";
var weather = "Sunny";

在我的HTML中，我引用了jQuery和settings.js，其中将存储所有变量。 body标记之间的代码如下所示：

<div class="company"></div>
<div class="city"></div>
<div class="weather"></div>

我正在尝试制作一些智能jQuery代码，它将通过settings.js文件读取，查找变量并加载它，然后找到与变量具有相同类名的HTML元素，最后更新该元素的内容变量值。

执行函数后，HTML应如下所示：

<div class="company">Apple</div>
<div class="city">Toronto</div>
<div class="weather">Sunny</div>

注意： HTML中可能有多个位置具有相同的类名。所有这些都将在FF本地运行。这是测试/演示项目，所以我不太担心性能。

JSFiddle:

Answer 1

使用对象包含变量，然后可以使用字符串引用属性：

 // Variables 
    var data = {
        company:"Apple",
        city:"Toronto",
        weather:"Sunny"

    }

    $("div").each(
        function(){
        this_class = $(this).attr("class");
        $(this).text(data[this_class]);
        }
    );

Answer 2

这是不可能的，因为无法获得给定范围内的变量列表（请参阅Getting All Variables In Scope）。

如果您要离开var（不一定推荐），那么每个都会附加到window对象，您可以这样做：

$("div").each(function () {
   $(this).text(window[$(this).attr('class')]);
});

作为替代方案，您还可以在对象中定义这些值，而不是将每个值作为自己的变量。

Answer 3

你需要某种范围来解决这个问题。只需将它们定义为var x就可以将它们放在窗口上。因此，您可以遍历窗口上的所有变量来查找它们：

for(var k in window) {
    // do stuff
}

但正如您可能想象的那样，会有很多窗口变量（此页面上我的Chrome浏览器中有45个。

Matanya刚刚击败我，确定了范围界定后的情况。但以上是其中一些原因。

编辑：我实际上会以其他方式执行此操作，而不是选择div，而是选择类名。你会得到一个小得多的结果集选择你感兴趣的课程（对于一个典型的页面，反正 - div通常像糖果一样散布）。

for(var k in data)
{
    $("."+k).html(data[k]);
}

使用jQuery，如何获取变量值，找到与变量具有相同类名的HTML元素，并更新内容

3 个答案: