0

ホバー時に表示する別の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、...にカーソルを合わせると表示され、カーソルを合わせると、アイテムは希望どおりにそこにとどまります。しかし、戻ってアイテムのいずれかを表示しようとすると、最後のアイテムのみが表示されます。ですから、スクリプトを更新し、カーソルを合わせたアイテムの順序に関係なくスクリプトが機能することを確認する必要があると思います。

アップデート

これがjsfiddlehttp ://fiddle.jshell.net/7QmR5/です

4

2 に答える 2

1

次のように要素をフォーマットできます

HTML

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

これにより、次のことが可能になります

$(".dotdiv > ul > li").hover( function( ) {
    $(".dotdiv > div").hide();
    $("#info-" + $(this).attr("id") ).show();
});

ここでフィドル

于 2012-11-26T10:53:06.043 に答える
1

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-26T12:54:47.800 に答える