在悬停状态下显示和隐藏列表项

Question

我有一张无序的单子看起来像这样

<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元素中的所有a标记上都绑定了一个悬停事件(尽管语法错误，但在按id对元素进行寻址时，应该始终添加“#”)，而且您所要查找的是：

$('#pop li').hover(function() {

});

Answer 2

我建议：

$('#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 Fiddle演示。

我忘记说的是，这将显示.info元素，它对应于当前悬停在li元素上的相同的index，因此，在第一个li上悬停将显示第一个.info，依此类推。因此，它依赖于在li和.info元素之间保持可预测的关系。

顺便说一句，只使用CSS就可以复制这种交互，尽管它需要点击而不是悬停事件，只要您修改li HTML以包含指向相关div的id的链接

<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 Fiddle演示。​

顺便说一句，引用属性是可选的(虽然如果它是一个包含空格的属性，则必须引用它)，但是如果引用，则必须在所引用的值的两端有一个引号：<div id="info-1></div>不是有效的HTML (因为字符串直到下一个属性开头的下一行才关闭)；使用：<div id="info-1"></div>。

此外，您发布的jQuery：

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

这行不通，因为：

1. 选择器将与任何元素不匹配，您试图将目标指向pop元素中的一个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 Fiddle演示。

参考文献：

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

Answer 3

试试这个：

$(function(){
  $('#pop li').hover(function(){
     $('#info-'+$(this).index()+1).show();
  },function(){
     $('#info-'+$(this).index()+1).hide();
  });
});