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只需要设置整数。

效果问题

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

使用angularJS操作兄弟DOM元素

1 个答案: