Question

我有代码可以创建一个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>

表示不同的身份<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');
    });

});

请帮我创建多个圈子。

Answer 1

首先，您使用唯一的ID属性来识别多个圈子。这是不正确的。使用id属性时，每个id必须是唯一的。在对类似元素进行分组时，请使用类。

据说，经过仔细审查，这实际上并没有引起你的具体问题;但是，如果不予以纠正，将来可能会出现一个不同的问题。

实际上，问题是由你的addClass和removeClass选择器引起的。

当您添加和删除悬停类时，您在所有具有class outer和class inner的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">

多个Google+圈子一次性错误地悬停在一起

1 个答案: