javascript - 使用 angularJS 操作同级 DOM 元素

Question

假设我们有一些带有 5 个 img 元素的 div。悬停时，我想更改左侧所有元素的类。

<div id="stars">
     <img src="star.png" data-rating="1" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 1)"/>
     <img src="star.png" data-rating="2" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 2)"/>
     <img src="star.png" data-rating="3" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 3)"/>
     <img src="star.png" data-rating="4" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 4)"/>
     <img src="star.png" data-rating="5" ng-class="{rtHover: hover}" ng-mouseover="hoveredStars($event, 5)"/>
</div>

我想在悬停时更改同级元素上的“hover”变量，但不知道如何访问它们。

$scope.hoveredStars = function ($event, $selectedRating) {
    // Handling stars
}

Answer 1

访问同级范围

使用范围的 $$prevSibling 和 $$nextSibling 属性进行访问。

玩整数

不必访问同级作用域，而是操作一个整数，以便 ng-class 指令变成这样:

ng-class="{ rtHover: 3 < myInteger }"

那么您的 hoveredStar 只需要设置该整数即可。

性能问题

如果在同一页面中集中使用这样的速率组件，则不应该是 Angular 组件，因为它会从根范围生成大量消化。