1

我有创建单个 Google+ 圈子的代码。但是当我在 JSTL (JSP) (ArrayList) 中使用 for 循环创建多个圆圈时，所有圆圈同时悬停。当我将鼠标放在每个圆圈上时，我需要对每个圆圈产生圆圈效果。我正在使用 jQuery 来制作效果。以下是代码：

JSP
数组列表 

  <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 回答