javascript - 循环内 jquery .hover 函数的动态弹出窗口

Question

我的表中有一个 for-each 循环，其结构如下:

<c:set var="count" value="0" />
<c:forEach items="${message }" var="element">
    <div id="env">
        Details - <b>${fn:toUpperCase(element.key)}</b>
    </div>
    <table cellpadding="0" cellspacing="0" border="0"
        class="display dataTable" id="example">
        <thead>
            <tr>
                <td>Env</td>
                <td align="center">URL</td>
                <td>Details</td>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${element.value}" var="details"  varStatus="loop">
            <c:set var="count" value="${count + 1}"/>
                <tr>
                    <td>${details.env}</td>
                    <td><a href="${details.url}" target="_blank">${details.url}</a></td>                        
                    <td><a href="#" class="trigger">Details</a></td>
                    <!-- HIDDEN / POP-UP DIV -->
                    <div class="pop-up">
                        <h3>Pop-up div Successfully Displayed</h3>
                        <p>
                          ${details.env}
                        </p>
                    </div>
                    </tr>
            </c:forEach>
        </tbody>
    </table>
</c:forEach>

当用户将鼠标悬停在 元素上时，我尝试使用 jquery 为循环的每个元素显示一个弹出窗口。我的 jquery 代码是:

$(function() {
    var moveLeft = -200;
    var moveDown = 10;
    $('a.trigger').hover(function(e) {
      $('div.pop-up').show();
    }, function() {
      $('div.pop-up').hide();
    });

    $('a.trigger').mousemove(function(e) {
      $('div.pop-up').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    });

  });

我的问题是，它只显示循环的最后一个元素。如何显示类“trigger”循环中的每个元素？

Answer 1

这看起来很可疑:

 $('a.trigger').hover(function(e) {
      $('div.pop-up').show();
    }, function() {
      $('div.pop-up').hide();
    });

这两个相邻的函数看起来很可疑。您是否打算做类似的事情:

 $(function(){
    $('a.trigger').hover(function() {
        $('div.pop-up').hide();
        $(this).parent().next().show();
    });
    $('a.trigger').mousemove(function() {
        $('div.pop-up').hide();
    });
  });

在此示例中 - 您隐藏所有弹出窗口并显示当前元素后面的弹出窗口。我的建议的缺点是您需要维护结构。例如，如果您为组使用唯一的 ID/类，则会更加一致。

更新

我发现两个可能的问题。

1 弹出式 div 不在元素内部，可能会被浏览器删除。请参阅下面的 fiddle ，第一个 div 没有 td，如果您检查 html 源代码 - 它根本不存在。

2 悬停/鼠标移动似乎也是两栖的，我用 mouseover 和 mouseleave 更简单地重写了它(注意我为弹出 div 添加了一个额外的 td 父级) :

$(function () {
    $('a.trigger').mouseover(function () {
        $(this).parent().next().children().show();
    });
    $('a.trigger').mouseleave(function () {
        $('div.pop-up').hide();
    });
});

这是一个工作示例:http://jsfiddle.net/n6wh2/1/

希望这有帮助