Смена значка при наведении

Question

Смена значка при наведении

0

Я работаю над изменением значка при щелчке и зависании с 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>

Malkeet Singh 20 авг. 2015, в 09:35

Источник

0

в чем проблема? фрагмент кода работает. Или вы хотите другое поведение?
Nano 20 авг. 2015, в 06:52
0

проблема в том, что если я наведите курсор на значение, которое должно быть восстановлено до исходного значения, например: если я наведите курсор на «1», это должно быть «3», а когда я наведите курсор, значение снова должно быть «1». Это работает хорошо, без сомнения. Но проблема со значением «2». Присмотритесь ... Значение "2" не восстанавливается до исходного значения после наведения. Существует проблема с hoverOut ()
Malkeet Singh 20 авг. 2015, в 07:01
0

не используйте класс в качестве переменной в вашей области видимости и в качестве имени класса. попробуйте добавить префикс или суффикс.
atinder 20 авг. 2015, в 07:06

Показать ещё 1 комментарий

Теги:

javascript

html

angularjs

css

1 ответ

Ещё вопросы

в чем проблема? фрагмент кода работает. Или вы хотите другое поведение?
проблема в том, что если я наведите курсор на значение, которое должно быть восстановлено до исходного значения, например: если я наведите курсор на «1», это должно быть «3», а когда я наведите курсор, значение снова должно быть «1». Это работает хорошо, без сомнения. Но проблема со значением «2». Присмотритесь ... Значение "2" не восстанавливается до исходного значения после наведения. Существует проблема с hoverOut ()
не используйте класс в качестве переменной в вашей области видимости и в качестве имени класса. попробуйте добавить префикс или суффикс.

Nano · Accepted Answer · 2015-08-20T05-32-00.000Z

Если вы хотите восстановить старое значение, вам необходимо кэшировать его внутри контроллера.

Ваш код должен выглядеть так (я также изменил if, else block на тройной):

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
    }


});