將當前狀態添加到每個列表項目

我有一個無序列表，其中一些項目導致另一個div在懸停時顯示。將當前狀態添加到每個列表項目

HTML

<div class="dotdiv"> 
    <ul> 
    <li>Item</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    </ul> 

    <div class="info-1"></div> 
    <div class="info-2"></div> 
    <div class="info-3"></div> 
</div>

的JavaScript

$(function(){ 
$('.dotdiv li').hover(function(){ 
    $('.info-' + $(this).attr('id').replace('li','')).show(); 
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block'); 

},function(){ 
    $('.info-' + $(this).attr('id').replace('li','')).hide(); 
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block'); 
}); 
});

現在，當我將鼠標懸停在項目1，2，...它顯示出來，當我還在徘徊了項目呆在那裏就像我想要的那樣。但現在，如果我回去嘗試顯示任何項目，最後一個只能看到。所以我在猜測我需要更新我的腳本，並確保它可以工作，而不管您懸停的項目的順序如何。

UPDATE

這裏是的jsfiddle http://fiddle.jshell.net/7QmR5/

來源

2012-11-26 Dino Excel

該html與您顯示的代碼不匹配 - .dotdiv元素沒有任何'li'子元素，而'li'元素沒有'id'屬性。「id」以'info-'開頭的元素在每個函數的第二行有CSS設置在哪裏？你能糾正它，並可能在http://jsfiddle.net上設置演示？ – nnnnnn

仍然沒有在這裏工作 - 就像@nnnnnn說，你可以發佈一個JSFiddle [像這樣]（http://jsfiddle.net/VE6wm/）？ – MarcoK

在mouseout處理程序中，爲什麼要調用'.hide（）'和'css（'display'，'block'）;'在同一個元素上？ 'block'會再次取消隱藏。此外，該更新的HTML仍然沒有ID，所以它仍然不能與你的真實代碼相同... – nnnnnn

如果你不想修改HTML：

$('#pop li').each(function(i, el){ 
$(this).hover(
    function(){ 
     $("[id^='info']").eq(i).show().siblings("[id^='info']").hide(); 
    }, 
    function(){ 
     $("[id^='info']").eq(i).show().siblings("[id^='info']").hide(); 
    } 
)

}）;

來源

2012-11-26 12:54:47 obl

可以按如下步驟

HTML

<li id="1">Item</li> 
<div id="info-1"></div>

，它允許你做以下

0格式化元素

小提琴here

來源

2012-11-26 10:53:06 Bruno

當你將鼠標移出它消失...我想添加一個當前狀態...所以應該顯示上次懸停的項目 –

@DinoExcel更新我的示例。只是不要將鼠標懸停在外面。 – Bruno

@DinoExcel很抱歉更新了我的例子，所以divs最初是隱藏的 – Bruno

將當前狀態添加到每個列表項目

回答

相關問題