用多个框替换文本

时间:2011-08-09 08:09:19

标签: jquery

我从jQuery开始,我需要这是一个项目。

例如我有这个:

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

还有一个div:

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

我想要完成的是当我将鼠标悬停在一个方框上时,促销div会将内容替换为相应的info_box

所以当我将鼠标悬停在box1上时,我想要在促销div中使用box_info_1的内容

3 个答案:

答案 0 :(得分:1)

我喜欢使用数据元素选择器,你也可以!

数据元素是HTML5标准seen here的一部分,允许用户将ad-hoc数据与任何元素相关联。它们在all modern browsers中提供。此外,jQuery定义了一个简单的标准,通过$.data() function读取和写入数据属性。以下示例将CSS选择器存储在每个元素的数据元素中,然后在实现悬停处理程序时引用它。

首先,告诉每个“框”分配哪个box-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获取元素并替换promo:

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

答案 1 :(得分:0)

$('.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);
});

答案 2 :(得分:0)

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