添加类上动态的mouseenter相邻的元素 [英] Add classes to adjacent elements dynamically on mouseenter

问题描述

我要创建元素的网格，有一个适当的悬停效果，使用CSS的过渡，每个元素。我想在相邻的X轴和Y轴的元素添加辅助效果为好，创造了云的影响。我想我将引用使用这些元素jQuery的的next（）和 preV（）方法，或通过$索引和$父。$指数。

I'm creating a grid of elements and have a hover effect in place, using CSS transitions, for each element. I'd like to add secondary effects on adjacent x- and y-axis elements as well, creating a cloud effect. I imagine I'll be referencing those elements using jQuery's next() and prev() methods, or by $index and $parent.$index.

网格面积足够大，以prevent行包装（使用切缘阴性和隐藏的溢出）。

The grid area will be large enough to prevent row-wrapping (using negative margins and hidden overflow).

下面是我重复一个简单的例子：

Here's a simplified example of my repeat:

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

和一个控制器中的功能（这是我意识到可能不是最好的方法）：

And a function in the controller (which I realize may not be the best approach):

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

如何定位使用纳克级（或别的东西）内相邻的徘徊元素的元素NG-重复？

下面是一个摆弄摆弄。

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

For reference, here are some related discussions:

• 角JS更改类鼠标悬停


• Angular JS NG重复使用条件纳克级不适用CSS类


• ng-mouseover和离开angularjs
使用鼠标切换项目

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

推荐答案

下面是计算所有相邻单元的指标，并增加了使用jQuery只是......不是纳克级相邻类指令。

Here's a directive that calculates all of the indices of adjacent cells and adds the adjacent class using jQuery only ... not ng-class.

假设该行将换行，就需要调整个人行元素

Assumes that rows will wrap , would need adjusting for individual row elements

.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的依赖无论是。

It wouldn't take much tweaking to remove jQuery dependency either.

还需要对家长额外指令来删除多余的类时鼠标离开主父从边缘之一

Also would need additional directive on parent to remove extra classes when mouse leaves the main parent from one of the edges

<大骨节病> 演示

这篇关于添加类上动态的mouseenter相邻的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！