jquery .html（）と.attr（）でPタグを設定する

Question

jqueryを使用して、<p>のタグにクラスに基づいたコンテンツを設定しようとしています。ここに私のコードです：.html(id)を使用することにより

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

、私は<p>タグのclassと同じ名前の変数に格納されたコンテンツを呼び出すようにしようとしています。しかし、この方法は、

<p>header</p> 

および変数からコンテンツを引っ張るとは対照的に

<p>desc</p> 

を返します。

正しい方向のポイントは非常に高く評価されます。

Answer 1

jQueryはマジックではありません - JavaScriptのメソッドは、その名前で現在のスコープ内の変数を見つけることはできません。あなたはdata[id]で要素にアクセスすることができ、その後

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

：この問題を解決する最良の方法は、オブジェクト内のデータを置くことであれば、

$('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"を使用することです。これにより、「キー」を使用してデータにアクセスできます。たとえば、オブジェクトリテラルルックスは次のように：

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

しかし、きちんとしたものを使用して、変数を使用してアイテムにアクセスするために角括弧表記を使用することができます：

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

私たちは、その後、ドット表記を使用して情報にアクセスすることができます：

：

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

だから、あなたの質問に答えるために、以下を試してみてください

Answer 3

id変数には、要素のクラス名の文字列が含まれます。この文字列は、headerおよびdesc変数とは関係ありません。

私はあなたの条件を置く別の方法は、あなたがページ上の段落の要素をループにしたいということで、そのクラスに応じてその内容を設定すると思います。 this.classNameと等価しかし$(this).attr("class")よりも効率的であることを

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

$("p.header,p.desc").html(function() { 
    return this.className === "header" ? header : desc; 
}); 

注：彼らは唯一の各一つのクラスを持っている場合、以下はに動作します。

上記のいずれかのクラスを持つすべての段落要素を選択し、その内容をクラスに応じて設定します。あなたはcontentに複数の項目を追加することができ、彼らはを変更せずに自動的に適用されます最後の方法では

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

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

：

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

それとも、より一般的な解決策を行うことができます：あなたはまた、これを行うことができます.each()ループ。