我想要一个元素在单击它时在 3 个 css 类之间交换。我已经看到其他解决方案在仅切换 2 个类时有效 like this one .这些基于 true 和 false 条件,因此它不适用于超过 2 个类。
我让它在 3 个类之间交换,但是,点击目标是所有元素而不是被点击的单个元素。 <强> Here's my code so far :`
$scope.iconClass = "green";
$scope.iconClicked = function () {
switch ($scope.iconClass) {
case "green":
$scope.iconClass = "red";
break;
case "red":
$scope.iconClass = "blue";
break;
default:
$scope.iconClass = "green";
}
};`
html 在这里:`
<li class="item" ng-class="iconClass" ng-click="iconClicked()"> Item 1 <br> </li>
<li class="item" ng-class="iconClass" ng-click="iconClicked()"> Item 2 <br> </li>
<li class="item" ng-class="iconClass" ng-click="iconClicked()"> Item 3 <br> </li>
`
如何不必为每个不同的元素创建不同的 iconClass 变量?我相信有一个简单、优雅的解决方案。
最佳答案
ng-class
支持基于涉及范围变量的逻辑表达式添加多个类。
class="ng-class: expression;"
Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values.
您可以通过 ng-class="{'red':'iconclass == red', 'blue':'iconClass == blue'}"
实现此目的
您可以使用 SWAP 按钮更改颜色,这正是您要找的。p>
示例可以在这里找到:http://plnkr.co/edit/lzHkZaBn1RQv24LaxQYT?p=preview
关于javascript - 如何仅针对单击的元素在 Angular 中的 3 个或更多类之间交换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42927269/