用多个文本框替换文本

我以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，我想box_info_1在促销DIV

来源

2011-08-09 Databaas

您是否尝试过什么了吗？ –

我喜欢使用的数据元素选择，等等你可以吗！

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

首先，告诉每一个“盒子”，这箱信息元素被分配到（我们使用的数据属性的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()); 
});

来源

2011-08-09 08:13:15 ghayes

数据项是官方标准的一部分吗？如果是这样，你能提供一个链接吗？它对我来说很好看！ – Veger

是的，它是HTML5的data- *元素功能的一部分。请参阅我的答案的编辑（第2段）以获得更全面的解释。 – ghayes

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

来源

2011-08-09 08:11:36 Calum

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

来源

2011-08-09 08:14:03 thecodeparadox

@ user868376这将在'hover'中设置'＃promo'文本，并且将鼠标悬停在外将设置默认文本 – thecodeparadox

用多个文本框替换文本

回答

相关问题