用多個文本框替換文本

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

用多個文本框替換文本

回答

相關問題