在悬停时显示一个元素，使用第一个元素 ID 作为定位第二个元素的变量

Question

基本上我有两组元素。例如：

<ul id="feature1">
    <li class="items" id="item1">Item 1</li>
    <li class="items" id="item2">Item 2</li>
    <li class="items" id="item3">Item 3</li>
<ul>

<ul id="feature2">
    <li class="post" id="item1-post">Post 1</li>
    <li class="post" id="item2-post">Post 2</li>
    <li class="post" id="item3-post">Post 3</li>  
<ul>

我在这里尝试做的非常简单：当用户将鼠标悬停在来自#feature1 的元素上时，我会显示（然后在鼠标移出时隐藏）#feature2 中的相应元素。我可以为每个 .items 元素编写函数，并且它对应于 .post 元素，但我认为应该可以通过正确的命名方案将其编写为单个函数，首先获取悬停的 id在 .items 元素上，然后通过查找具有保存 ID variable + "-post" 的正确 .post 元素来应用显示/隐藏（或添加类等）。

为了简化：我将鼠标悬停在 li#item1 - jQuery 将 #item1 保存为我的变量，然后查找 ID 为 item1 + "-post" 的 #feature2 的子元素，显示给定元素，然后将其隐藏鼠标移出。

我已经非常接近了，但似乎永远无法弄清楚正确的逻辑。

如果这是可行的，我希望完成的第二个方面是额外的onclick，它会一直显示相应的#feature2 元素，直到鼠标悬停在下一个元素上。

提前感谢您的帮助，我整个下午都在用头撞这个。

Answer 1

我建议，尽管未经测试：

$('#feature1 li.items').hover(function(){
    $('#' + this.id + '-post').show();
}, function(){
    $('#' + this.id + '-post').hide();
});

或者：

$('#feature1 li.items').hover(function(){
    $('li.post').eq($(this).index()).show();
}, function(){
    $('li.post').eq($(this).index()).hide();
});

参考资料：

• eq()。
• hide()。
• hover()。
• index()。
• show()。

Answer 2

可能不使用相应索引的命名方案

var $feature2 = $('#feature2'),
    $hoveredElm;

$('#feature1 li').hover(function() {
    var idx = $(this).index();
    $hoveredElm = $feature2.find('li').eq(idx).show();
}, function(){
    $hoveredElm.hide();
});