3

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

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

所以我的问题当然是，我怎样才能使这个脚本适用于所有项目。

4

5 回答 5

10

我建议：

$('#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 小提琴演示。​</p>

顺便说一句，引用属性是可选的（尽管如果它是包含空格的属性，则必须引用它），但是如果您引用，则必须在您引用的值的两端都有一个引号：不是<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加上 a #（就像您在下一行中所做的那样，所以我假设那里有一个错字），给出：$('#pop a')。但，
  2. a元素中没有#pop元素，因此没有事件将被或可以被绑定。

但是，如果您需要使用该表单，则可以进行一些调整：

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

JS 小提琴演示。

参考：

于 2012-11-24T20:33:07.947 回答
3

试试这个 ：

$(function(){
  $('#pop li').hover(function(){
     $('#info-'+$(this).index()+1).show();
  },function(){
     $('#info-'+$(this).index()+1).hide();
  });
});
于 2012-11-24T20:33:03.843 回答
2

您已经在 pop 元素内的所有标签上绑定了一个悬停事件a（尽管您有语法错误，但在按 id 寻址元素时应该始终添加“#”）并且您没有它们您正在寻找的是：

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

});
于 2012-11-24T20:32:53.593 回答
2

这是示例http://fiddle.jshell.net/7QmR5/

HTML：

<div id="pop">
    <ul>
        <li id="li1">Item 1</li>
        <li id="li2">Item 2</li>
        <li id="li3">Item 3</li>
    </ul>
</div>

<div id="info-1" style="display:none;">info 1</div>
<div id="info-2" style="display:none;">info 2</div>
<div id="info-3" style="display:none;">info 3</div>

JavaScript：

$(function(){
    $('#pop li').hover(function(){
        $('#info-' + $(this).attr('id').replace('li','')).show();
    },function(){
        $('#info-' + $(this).attr('id').replace('li','')).hide();
    });
});​
于 2012-11-24T20:39:38.773 回答
1

我有一个更简单的解决方案：

CSS

#info-1{
    display:none;
}
ul > li:hover #info-1 {
    display:block;
}

给 li 元素一个 id 可以更容易地使用 CSS 选择它们，除非你想使用 pseudo 我相信它被调用了。

或者如果需要的话 jQuery：

$('li:eq[0]','#pop').hover(function(){
    $('info-1').show();
});
于 2012-11-24T20:36:59.883 回答