在悬停时显示和隐藏列表项

Question

我有一个看起来像这样的无序列表

HTML

<div id="pop">
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
     </ul>
</div>
<div id="info-1></div>
<div id="info-2></div>

当您将鼠标悬停在其中一个项目上时,会显示一个窗口,其中包含有关该项目的一些信息.我已经为一个项目解决了这个问题,现在我想知道如何在整个列表中完成这项工作.

我最初的想法是为每个项目创建一个脚本......但考虑到js的功能,这似乎有点厚.

使用Javascript

$(function(){
     $('pop a').hover(function(){
          $('#info-1').show();
     },function(){
          $('#info-1').hide();
     });
});

所以我的问题当然是,如何让这个脚本适用于所有项目.

Answer 1

我建议:

$('#pop li').hover(
    function() {
        $('div.info').eq($(this).index()).show();
    }, function() {
        $('div.info').eq($(this).index()).hide();
    });?

使用略微更改的HTML:

<div id="pop">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ul>
</div>

<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>?

JS小提琴演示.

我忘了说的是,这将显示与当前悬停.info元素相对应的元素,因此悬停第一个将显示第一个,依此类推.因此,它依赖于维持元素与元素之间的可预测关系.indexli li.infoli.info

顺便说一下,只使用CSS就可以复制这种交互,虽然它需要点击而不是悬停事件,只要你修改liHTML以包含指向id相关链接的链接div:

<div id="pop">
    <ul>
        <li><a href="#info1">Item 1</a></li>
        <li><a href="#info2">Item 2</a></li>
        <li><a href="#info3">Item 3</a></li>
        <li><a href="#info4">Item 4</a></li>
        <li><a href="#info5">Item 5</a></li>
        <li><a href="#info6">Item 6</a></li>
        <li><a href="#info7">Item 7</a></li>
    </ul>
</div>

<div class="info" id="info1"></div>
<div class="info" id="info2"></div>
<div class="info" id="info3"></div>
<div class="info" id="info4"></div>
<div class="info" id="info5"></div>
<div class="info" id="info6"></div>
<div class="info" id="info7"></div>?

而CSS:

.info {
    /* hides by default */
    display: none;
}

.info:target {
    /* shows when targeted */
    display: block;
}

JS小提琴演示.

顺便说一句,引用属性是可选的(不过,如果它是一个包含空格它的属性必须用引号括起来),但如果你引用你必须在报价都你引述值的目的:<div id="info-1></div>是不是有效的HTML(因为string直到下一个属性开头的下一行才关闭); 使用:<div id="info-1"></div>.

而且,你发布的jQuery:

$(function(){
     $('pop a').hover(function(){
          $('#info-1').show();
     },function(){
          $('#info-1').hide();
     });
});

这不起作用,因为:

1. 选择器将不匹配任何元素,您试图将a元素内部pop(显然,不存在)中的元素作为目标.你需要做的是在前面id加上一个#(正如你在下一行所做的那样,我假设在那里有一个错字),给予:$('#pop a').但,
2. a元素中没有元素#pop,因此不会绑定任何事件.

但是,如果您需要使用该表单,那么可以使用它进行一些调整:

$(function(){
     $('#pop li').hover(function(){
          $('#info-' + $(this).text().match(/(\d+)/)).show();
     },function(){
          $('#info-' + $(this).text().match(/(\d+)/)).hide();
     });
});

JS小提琴演示.

参考文献:

• eq().
• hide().
• hover().
• index().
• match().
• show().
• text().