Question

我创建了一个元素网格，并为每个元素使用CSS转换实现了悬停效果。我也希望在相邻的x轴和y轴元素上添加辅助效果，从而创建云效果。我想我会使用jQuery的next()和prev()方法，或$ index和$ parent。$ index来引用这些元素。

网格区域足够大，可以防止换行（使用负边距和隐藏溢出）。

以下是我重复的简单示例：

<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-class（或其他内容）来定位与悬停元素相邻的元素？

Here's a fiddle for fiddling.

供参考，以下是一些相关的讨论：

Answer 1

这是一个指令，用于计算相邻单元格的所有索引，并仅使用jQuery添加相邻类...而不是ng-class。

假设行将换行，需要调整各个行元素

.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

Answer 2

首先，处理控制器中的DOM元素并不是一个好主意。

此外，这个问题似乎主要与样式相关，而不是功能相关。因此，我会尝试将逻辑保留在View中而不是控制器中。

有两种方法可以处理特定于视图的逻辑：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

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

2 个答案: