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

  });

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

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不在内部元素中，可能会被浏览器删除。请参阅下面的小提琴，第一个div没有td，如果你检查html源 - 它根本就不存在。

2悬停/鼠标移动似乎也是两栖的，我用鼠标悬停和 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/

希望这有帮助

循环中jquery .hover函数的动态弹出窗口

1 个答案: