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

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.

供参考，这里有一些相关的讨论：

Change class on mouseover in directive
Angular js ng repeat with conditional ng class not applying css class
ng-mouseover and leave to toggle item using mouse in angularjs

Answer 1

首先，在控制器中处理 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

Answer 2

这是一个指令，它计算相邻单元格的所有索引并仅使用 jQuery 添加相邻的 class ...而不是 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 依赖项也不需要太多调整。

当鼠标从边缘之一离开主父级时，还需要对父级附加指令以删除额外的 classes

DEMO

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

Add classes to adjacent elements dynamically on mouseenter

css

angularjs

ng-repeat

ng-class

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