使用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]);
        }
    );??????