1

単一のGoogle+サークルを作成するコードがあります。しかし、JSTL（JSP）（ArrayList）でforループを使用して複数の円を作成すると、すべての円が一度にホバリングします。マウスを円の上に置くと、各円に円効果が必要です。エフェクトにはjQueryを使用しています。コードは次のとおりです。

JSP
ArrayList 

  <c:forEach items="${groups}" var="groups">
          <div id="circle">
        <div class="outer"> </div>
        <div class="middle"></div>`enter code here`
        <div class="inner"><c:out value="${groups.name}"/></div>
    </div>

 </c:forEach>

別のIDの<c:out value="${groups.id}"/>

jQuery 

$(function() {

    $('#circle').mouseover(function() {

        $('div.outer').addClass('hover');
        $('div.middle').addClass('hover');
    });


    $('#circle').mouseout(function() {
        $('div.outer').removeClass('hover');
        $('div.middle').removeClass('hover');
    });

});

複数のサークルを作成するのを手伝ってください。

4

1 に答える 1

1

まず、一意のid属性を使用して、複数の円を識別しています。これは正しくありません。id属性を使用する場合、各IDは一意である必要があります。同様の要素をグループ化する場合は、代わりにクラスを使用してください。

そうは言っても、慎重に検討した結果、これが実際にここで特定の問題を引き起こしているわけではありません。ただし、修正しないと、後で別の問題として現れる可能性があります。

実際、この問題はaddClassセレクターとremoveClassセレクターが原因で発生します。

ホバークラスを追加および削除すると、クラス外部およびクラス内部のすべてのDIVでこれが実行されます。jQuery findメソッドを使用して、サークルのコンテキスト内の特定のDIVのみをターゲットにします。

$(function() {

    $('.circle').mouseover(function() {

        $(this).find('div.outer').addClass('hover');
        $(this).find('div.middle').addClass('hover');
    });


    $('.circle').mouseout(function() {
        $(this).find('div.outer').removeClass('hover');
        $(this).find('div.middle').removeClass('hover');
    });

});

また、クラスを使用するようにセレクターを変更しました。

<c:forEach items="${groups}" var="groups">
      <div class="circle">
于 2012-05-09T04:51:35.330 に答える