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

我想懸停在兄弟元素上更改“懸停”變量，但不知道如何訪問它們。

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

Answer 1

訪問兄弟范圍

使用范圍的$$prevSibling和$$nextSibling屬性進行訪問。

玩一個整數

而不是必須訪問兄弟范圍，操縱一個整數，以便ng-class指令將變為這樣：

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

然后你的hoveredStar只需要設置整數。

表現關注

如果在同一頁面中密集使用，這樣的速率分量不應該是角分量，因為它從根范圍產生大量消化。