chỉ mục jquery() - mục danh sách di chuột, hiển thị nội dung có cùng chỉ mục

Question

Tôi đang gặp vấn đề về jquery với một menu nhỏ mà tôi có. Tôi có một danh sách các mục menu. Khi tôi di chuột qua một trong các mục danh sách, tôi muốn hiển thị nội dung từ danh sách các div chia sẻ cùng một chỉ mục với mục danh sách. Điều này cần phải năng động, cho phép bất kỳ số lượng mục menu và nội dung nào.

$(document).ready(function() { 
    $("#leftnav li").each(function(){ 
     $(this).mouseover(function() { 
      //SHOW div that shares same index as this li 
     }); 
     $(this).mouseout(function() { 
      //HIDE div that shares same index as this li 
     }); 
    }); 
}); 

<ul id="leftnav"> 
    <li>Link 1</li> 
    <li>Link 2</li> 
</ul> 

<div id="content"> 
    <div>Content 1</div> 
    <div>Content 2</div> 
</div> 

Answer 1

tôi có lẽ muốn sử dụng phương pháp hover() để đơn giản hóa này (hoặc hoverIntent plugin, mà giải quyết một vài vấn đề khác như vấn đề với di chuyển chuột nhanh chóng) .

$(function() { 
    $('#leftnav li').hover(
      function() { 
       var idx = $('#leftnav li').index(this); 
       $('#content div').eq(idx).show(); 
      }, 
      function() { 
       var idx = $('#leftnav li').index(this); 
       $('#content div').eq(idx).hide(); 
      } 
     }): 
}); 

Answer 2

này nên làm như lừa:

$(function() { 
     $('#leftnav li').mouseover(function() { 
      var index = $('#leftnav li').index($(this)); 
      $('#content').find('div:eq(' + index + ')').show(); 
     }).mouseout(function() { 
      var index = $('#leftnav li').index($(this)); 
      $('#content').find('div:eq(' + index + ')').hide(); 
     }); 
    }); 

Answer 3

sử dụng prevAll().length. Tốt hơn nhiều so với .index