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元素上的h .items，然后通过查找带有已保存ID {{{{}}的正确.post元素来应用show / hide（或添加类，等等） 1}}。

简化：我将鼠标悬停在variable + "-post"上 - jQuery将li#item1保存为我的变量，然后查找ID为#item1的{{1}}子项，显示给定元素，然后将其隐藏在mouseout上。

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

如果这是可行的，我想要完成的第二个方面是额外的#feature2，它会显示相应的item1 + "-post"元素，直到鼠标悬停在下一个元素上。

提前感谢您的帮助，我整个下午一直在反对这个问题。

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();
});

参考文献：

Answer 2

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

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

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

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

2 个答案: