1

我的表中有一个 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);
    });

  });

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

4

1 回答 1

0

好吧，这似乎很可疑：

 $('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 不在元素内部，可能会被浏览器删除。请参阅下面的小提琴第一个 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/

希望这可以帮助

于 2013-09-02T08:44:46.743 回答