Jquery .html（）和.attr（）來填充P標籤

我想使用jquery來填充<p>標籤與內容基於他們的類。這裏是我的代碼：Jquery .html（）和.attr（）來填充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)，我試圖調用存儲在變量具有相同的名稱爲<p>標籤的class內容。然而，這種方法只返回

<p>header</p>

和

<p>desc</p>

，而不是甩開了變量的內容。

一個正確的方向點將不勝感激。

來源

2012-03-09 user1258303

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

來源

2012-03-09 01:32:51 Ryan

對不起，我不是故意在我的後半部分複製你的答案：當發佈有關發佈新答案的警告時，我只看到了霍雷肖的 - 我猜我沒有向下滾動得足夠遠。 – nnnnnn 2012-03-09 01:46:25

麻煩的是，你真的沒有辦法很容易地引用你的變量。在JavaScript中可以引用的命名項目的方法是使用"Object literal"。這允許您使用「密鑰」訪問數據。例如，一個對象字面看起來像：

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

但整潔的事情是，你可以用方括號使用變量來訪問項目：

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

來源

2012-03-09 01:33:43

您的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()。

來源

2012-03-09 01:34:54 nnnnnn

Jquery .html（）和.attr（）來填充P標籤

回答

相關問題