Javascript Jquery.html（）和.attr（）来填充P标记

我正在尝试使用jquery根据类的内容填充

标记。这是我的密码：

<p class="header"></p>
<p class="desc"></p>

通过使用

.html（id）

，我试图调用存储在变量中的内容，其名称与

标记的

类的名称相同。但是，此方法仅返回

<p>header</p> 

标题


及

desc


而不是从变量中提取内容

如果方向正确，我们将不胜感激。
jQuery不是魔术——JavaScript中的任何方法都无法在当前范围内找到具有该名称的变量。解决此问题的最佳方法是将数据放入对象中：

var data = {
    header: 'I am a header',
    desc:   'I am a description'
};

然后，您可以使用
数据[id]
访问元素：

$('p').each(function() {
    var $this = $(this);
    var id = $this.attr('class');

    if(id in data) {
        $this.html(data[id]);
    }
});

或者，如果您喜欢JavaScript：

var paragraphs = document.getElementsByTagName('p');
var i, p;

for(i = 0; p = paragraphs[i]; i++) {
    if(p.className in data) {
        p.innerHTML = data[p.className];
    }
}

问题是你没有一种方法可以很容易地引用你的变量。在JavaScript中拥有可引用的命名项的方法是使用。这允许您使用“密钥”访问数据。例如，对象文字如下所示：

var myObj = { "keyname" : "value for key" };

然后，我们可以使用点符号访问信息：

console.log(myObj.keyname); // value for key

但最妙的是，您可以使用方括号表示法使用变量访问项目：

key = "keyname";
console.log(myObj[key]); // value for key

因此，要回答您的问题，请尝试以下方法：

var myContent, myClass, txt;

myContent = {
    "header" : "header content here",
    "desc"   : "description content here"
}
myClass = $("p").attr("class");
txt     = myContent[myClass];
$("p."+id).html(txt);

您的
id
变量将包含一个带有元素类名称的字符串。此字符串与
标题
和
desc
变量没有关系

我认为另一种表达需求的方式是，您希望循环页面上的段落元素，并根据它们的类设置它们的内容。如果他们每个人只有一个类，那么以下内容将起作用：

请注意，
this.className
与
$（this.attr（“class”）
等效，但效率更高

上面选择了具有任意一个类的所有段落元素，然后根据哪个类设置其内容。您也可以这样做：

$("p.header").html(header);
$("p.desc").html(desc);

或者，您可以使用更通用的解决方案：

var content = {
   "header" : "header content here",
   "desc"   : "description content here"
};

$("p").each(function() {
   var newContent = content[this.className];
   if (newContent)
      $(this).html(newContent);
});

使用最后一种方法，您可以将更多项目添加到
内容中
，它们将自动应用，而不会更改
。each（）
循环。
对不起，我并不想在下半部分重复你的答案：当关于新答案发布的警告出现时，我只看到了霍雷肖的答案——我想我没有向下滚动足够远。
$("p.header").html(header);
$("p.desc").html(desc);

var content = {
   "header" : "header content here",
   "desc"   : "description content here"
};

$("p").each(function() {
   var newContent = content[this.className];
   if (newContent)
      $(this).html(newContent);
});