テキストを複数のボックスに置き換えます

Question

私はjQueryを使い始めています。これはプロジェクトが必要です。例えば

私はこれ持っている：グリッド項目

<div class="box_info_1">Info for grid item</div> 
<div class="box_info_2">Info for grid item</div> 
<div class="box_info_3">Info for grid item</div> 

ため

<ul id="grid"> 
    <li class="box1">Lorem ipsum dolor sit amet!</li> 
    <li class="box2">Lorem ipsum dolor sit amet!</li> 
    <li class="box3">Lorem ipsum dolor sit amet!</li> 
</ul> 

や情報をそしてDIV：私は置くと

<div id="promo">I want to set grid info here</div> 

私が達成したい何かがありますボックスの上に、プロモーションディビジョンはコンテンツを対応するinfo_boxに置き換えます

だから私はBOX1にカーソルを合わせると、私はプロモーションのdiv

Answer 1

ためにbox_info_1のコンテンツをしたい、などあなたはできる！

データ要素はHTML5標準の一部であり、seen hereであり、ユーザーは任意の要素にアドホックデータを関連付けることができます。それらはall modern browsersで利用できます。さらに、jQueryは、$.data() functionを通じてデータ属性を読み書きする単純な標準を定義しています。次の例では、各要素のデータ要素にCSSセレクタを格納し、ホバーハンドラを実装するときにCSSセレクタを参照します。

まず、次のように、それが割り当てられている箱-info要素それぞれ「ボックス」（私たちは、データ属性にCSSセレクタを使用します）言う：

<ul id="grid"> 
    <li class="box box1" data-item=".box_info_1">Lorem ipsum dolor sit amet!</li> 
    <li class="box box2" data-item=".box_info_2">Lorem ipsum dolor sit amet!</li> 
    <li class="box box3" data-item=".box_info_3">Lorem ipsum dolor sit amet!</li> 
</ul> 

を次に、以下のJavaScriptを使用します要素を取得し、プロモーションの内容を置き換えるために：

$('.box').hover(function() { 
    $('#promo').text($($(this).data('item')).text()); 
}); 

Answer 2

$('.box1').hover(function(){ 
    $('#promo').text($('.box_info_1').text()); 
}); 

それとも、私はデータ要素のセレクターを使用するのが大好きすべてのボックス

$('#grid li').hover(function(){ 
    var currentNumber = $(this).attr('class').substr(3); 
    var currentText = $('.box_info_'+currentNumber).text(); 
    $('#promo').text(currentText); 
}); 

Answer 3

var txt = $('#promo').text(); 
$('#grid li').hover(function() { 
    var boxIndex = $('#grid li').index(this); 
    $('#promo').empty().text($('.box_info_' + (boxIndex + 1) + '').text()); 
}, 
function() { 
    $('#promo').empty().text(txt); 
});