代码之家 › 专栏 › 技术社区 › isherwood

在mouseenter上向相邻元素动态添加类

ng-class ng-repeat angularjs css

isherwood · 技术社区 · 11 年前

我正在创建一个元素网格,并使用CSS转换为每个元素设置悬停效果。我还想在相邻的x轴和y轴元素上添加辅助效果,从而创建云效果。我想我将使用jQuery的 next() 和 prev() 方法,或通过$index和$parent$指数

网格区域将足够大,以防止行换行(使用负边距和隐藏溢出)。

下面是我重复的一个简化示例:

<div class="activity-thumb-row" ng-repeat="i in getNumArray(20) track by $index">
    <div class="activity-thumb"
       ng-class="{'adjacent': adjacent}"
       ng-repeat="j in getNumArray(30) track by $index"
       ng-mouseenter="highlightActivities()">
    </div>
</div>

控制器中的一个功能(我意识到这可能不是最好的方法):

$scope.highlightActivities = function() {
    $(this).next().adjacent = true;
    $(this).prev().adjacent = true;
}

如何使用ng repeat中的ng类(或其他东西)将与悬停元素相邻的元素作为目标?

Here's a fiddle for fiddling.

以下是一些相关讨论,以供参考:

2 回复 | 直到 9 年前

charlietfl 11 年前

这里有一个指令,它计算相邻单元格的所有索引,并仅使用jQuery添加相邻类。。。不是ng类。

假设行将换行,需要针对单个行元素进行调整

.directive('activityThumb', function() {
  return {
    restrict: 'C',
    link: function(scope, elem) {
      elem.bind('mouseenter', function(e) {

        var elW = elem.width(),
            $parent =elem.parent(),
            parentW = $parent.width(),
            $items = $parent.children(),
            numItems =$items.length
            itemsPerRow = Math.floor(parentW / elW),
            idx = elem.index(),
            rowIndex = idx % itemsPerRow;
        /* object of various indices , easy to inspect*/
        var adjacentIdx = {
          top:     idx > itemsPerRow ? idx - itemsPerRow : false,
          right:   rowIndex != itemsPerRow ? idx + 1 : false,
          left:    rowIndex > 0 ? idx - 1 : false,
          bottom:  (numItems - idx) > itemsPerRow ? idx + itemsPerRow : false
        }
        console.dir(adjacentIdx);
        $items.removeClass('adjacent')
        $.each(adjacentIdx, function(position, index){
          if(index !== false){
            $items.eq(index).addClass('adjacent');
          }
        });

      });
    }
  }

});

移除jQuery依赖项也不需要太多调整。

当鼠标从一条边离开主父级时,还需要在父级上附加指令以删除额外的类

DEMO

New Dev 11 年前

首先,在控制器中处理DOM元素不是一个好主意。

此外,这个问题似乎主要与样式有关,而与功能无关。因此,我将尝试将逻辑保存在视图中,而不是控制器中。

有两种方法可以处理特定于视图的逻辑:1)使用自定义指令或2)视图定义的范围变量

第二种方法在这里可以奏效,似乎是最便宜的方法,但也有点难看。它 ng-init 是的 rowHighlight 数组,并设置突出显示的元素:

<div ng-repeat="i in getNumArray(20) track by $index" ng-init="rowHighlight = []">
    <div class="activity-thumb"
       ng-repeat="j in getNumArray(30) track by $index"
       ng-class="{'adjacent': rowHighlight[$index-1] || rowHighlight[$index+1]}"
       ng-mouseenter="rowHighlight[$index] = true" 
       ng-mouseleave="rowHighlight[$index] = false">
    </div>
</div>

updated fiddle