用多个框替换文本

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

例如我有这个：

 
Lorem ipsum dolor sit amet!
 
Lorem ipsum dolor sit amet!
 
Lorem ipsum dolor sit amet!
  

和网格项的信息

 
Info for grid item
 
Info for grid item
 
Info for grid item 

一个div：

 
I want to set grid info here 

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

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

Answer 1

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

数据元素是HTML5标准的一部分，可在此处看到 ，允许用户将ad-hoc数据与任何元素相关联。 它们适用于所有现代浏览器 。 此外，jQuery定义了一个简单的标准，通过$ .data（）函数读取和写入数据属性。 以下示例将CSS选择器存储在每个元素的数据元素中，然后在实现hover处理程序时引用它。

首先，告诉每个“框”它分配给哪个box-info元素（我们将在数据属性中使用CSS选择器），如下所示：

  
 
Lorem ipsum dolor sit amet!
 
Lorem ipsum dolor sit amet!
 
Lorem ipsum dolor sit amet!
  

然后使用以下JavaScript获取元素并替换promo的内容：

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