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

隣り合った2つの機能は疑わしいようです。次のようなことをするつもりでしたか:

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

この例では、すべてのポップアップを非表示にして、現在の要素の後のポップアップを表示します。私の提案の欠点は、構造を維持する必要があることです。たとえば、グループに一意の ID/クラスを使用すると、より一貫性が高まります。

アップデート

2 つの問題が考えられます。

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/n6w2/1/

お役に立てれば

于 2013-09-02T08:44:46.743 に答える