Question

我正在点击图标更改并使用angularJS进行悬停。我的问题是假设我的默认值是“1”并且我点击它，那么结果将是“2”，反之亦然。如果我将鼠标悬停在任何“1”或“2”上，我的结果应为“3” “并且在从数字上移除指针时，它会恢复到原始值，无论哪个都悬停在那里。这是我正在处理的代码以及代码片段。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
        <style>
            .red > #icon_span2{
                display:block;
            }
            .red > #icon_span1{
                display:none;
            }
            .red > #icon_span12{
                display:none;
            }
            .blue > #icon_span1{
                display:block;
            }
            .blue > #icon_span2{
                display:none;
            }
            .blue > #icon_span12{
                display:none;
            }
            .grey > #icon_span12{
                display:block;
            }
            .grey > #icon_span1{
                display:none;
            }
            .grey > #icon_span2{
                display:none;
            }
            #icon_span1 {
                display:none;
            }
            #icon_span2{
                display:none;
            }
        </style>
    </head>
    <body ng-app="ap" ng-controller="con">
        <div>
            <a ng-class="class" ng-click="changeClass()" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
                <span  id="icon_span2">
                    1
                </span>
                <span id="icon_span1">
                    2
                </span>
                <span id="icon_span12" >
                    3
                </span>
                <span class="text"> Feed</span>
            </a>
        </div>
    </body>
</html>

<script>
    var app = angular.module("ap",[]);
    app.controller("con",function($scope){
        $scope.class = "blue";
        $scope.changeClass = function(){
            if ($scope.class === "red")
                $scope.class = "blue";
            else
                $scope.class = "red";
        };
        var mal=$scope.class;
        $scope.hoverIn=function(){
            $scope.class="grey";
        }
        $scope.hoverOut=function(){
            if ($scope.class === "grey")
                $scope.class = "blue";
            else if
                ($scope.class === "blue")
                $scope.class = "red";
        };
    });
</script>

Answer 1

如果要恢复旧值，则需要将其缓存在控制器内。

您的代码必须如此（我还将if，else块更改为三元组）：

app.controller("con", function ($scope) {
    var classCache; //add a cache variable
    $scope.class = "blue";
    classCache = $scope.class; //set the default value

    $scope.changeClass = function () {
        classCache = $scope.class === "red" ? "blue" : "red"; //remeber the selected class
        $scope.class = classCache;
    };

    $scope.hoverIn = function () {
        $scope.class = "grey";
    };

    $scope.hoverOut = function () {
        $scope.class = classCache; //restore from cache
    }


});

在悬停时更改图标

1 个答案: