jQuery img relテキスト配置を別の領域に配置

Question

jqueryを使用してアクティブなクラスの画像を取得する方法、「rel」データを取得してそのテキストを別のdiv内のテキストにh2で適用する方法を解明しようとしていますタグ。私はjQueryを初めて使っていて、それでも私の心を包み込んでいます。何か起こっていることを説明してください、それは理にかなっています！事前にお返事ありがとうございます！

私が把握することができますすべてがこれです：

jQueryの（私はそれを適用する方法だけでわからない...私はこれを必要とするでしょうね）

var title = $("#slider img.active").attr("rel"); 

HTML：

text機能アウト

<div id="slider"> 
    <div id="sliderimgholder"> 
     <img class="active" src="images/slider-1.jpg" alt="" rel="image one" /> 
     <img class="" src="images/slider-2.jpg" alt="" rel="image two" /> 
     <img class="" src="images/slider-3.jpg" alt="" rel="image three" /> 
    </div> 

    <div id="ribbon"> 
     <h2>THIS SHOULD BE POPULATED WITH text image one</h2> 
    </div> 
</div> 

Answer 1

チェック：

var title = $("#slider img.active").attr("rel"); 

$("#ribbon h2").text(title); 

例：http://jsfiddle.net/eYPW4/

Answer 2

あなたは要素のテキストの内容を設定するtextメソッドを使用することができます。あなたはちょうどあなたが簡単なセレクターで行うことができます右の要素を選択する必要があります。

$("#ribbon h2").text(title); 

しかし、それはこれが#ribbonの子孫であるすべてのh2要素にテキストを配置することを注意することが重要です。あなたの質問の例では、1つしかないので問題はありませんが、変更があった場合には覚えておく価値があります。

要素に任意のデータを格納する場合は、HTML5 data-*属性を使用することができますので、relのような他の属性を見つける必要はありません。

Answer 3

私がお勧めしたい：

$('#sliderimgholder img').click(
    function(){ 
     $('#ribbon h2').text($(this).attr('rel')); 
    }); 

JS Fiddle demoを。

$('#sliderimgholder img').click(
    function(){ 
     $('#ribbon h2').text(this.getAttribute('rel')); 
    }); 

JS Fiddle demo：

はtext()方法内側jQueryオブジェクトを作成しないように、わずかに修正しました。