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

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]);
        }
    );​​​​​​