Question

我正在尝试使用jquery来填充基于其类的内容的<p>标记。这是我的代码：

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

var header = 'header content here';
var desc = 'description content here';

var id = $("p").attr("class");

$("p." + id).html(id);

使用.html(id)，我试图调用存储在变量中的内容，其名称与class标记的<p>相同。但是，此方法仅返回

<p>header</p>

和

<p>desc</p>

而不是从变量中提取内容。

非常感谢正确方向上的一点。

Answer 1

jQuery并不神奇 - JavaScript中的任何方法都无法在当前作用域中找到具有该名称的变量。解决此问题的最佳方法是将数据放在对象中：

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

然后，您可以使用data[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];
    }
}

Answer 2

麻烦的是，您实际上没有办法轻松引用变量。在JavaScript中命名可以引用的项目的方法是使用"Object literal"。这允许您使用“密钥”访问数据。例如，对象文字看起来像：

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);

Answer 3

您的id变量将包含一个字符串，其中包含元素类的名称。此字符串与header和desc变量没有任何关系。

我认为另一种提出要求的方式是，您希望遍历页面上的段落元素并根据其类别设置其内容。如果只有一个类

，则以下内容将起作用。

var header = 'header content here';
var desc = 'description content here' ;

$("p.header,p.desc").html(function() {
   return this.className === "header" ? header : 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);
});

使用最后一种方法，您可以向content添加更多项目，这些项目将自动应用，而不会更改.each()循环。

Jquery .html（）和.attr（）填充P标签

3 个答案: