如何从焦点/模糊更改父元素的类?

FlavorScape

我试图在获得焦点时将类添加到输入的父级。我可以获取父项,但似乎无法设置类名。这是我在这个plunkr中尝试的方法:

http://plnkr.co/edit/eEfSeD​​b7i3uujjBZt21z?p=preview

<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->

<head>
    <link rel="stylesheet" href="http://nervgh.github.io/css/animate.min.css" />    
    <style>
        .highlight {
          border: 2px solid red;
        }
        .blue-border
        {
          border:2px solid blue;
        }
    </style>

     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>    
    <script>
        angular.module( 'app', [])
            .run( function( $rootScope, $timeout ) {                   

                 $rootScope.focusInput= function($event )
                {
                    angular.element($event.target).parent().className += " " + 'highlight';
                    console.log( angular.element($event.target).parent() );
                };

                $rootScope.blurInput= function($event )
                {
                    angular.element($event.target).parent().className.replace(' highlight', '');                                       
                };
            });
    </script>

</head>
<body>

    <div class="blue-border">

      <input ng-focus="focusInput($event)" ng-blur="blurInput($event)" value="Lactobacillus acidophilus"/>  

</div>

</body>
</html>

注意它如何成功记录父级。但是,边框不会变成红色!还有其他的“角度”方式吗?

诺亚·所罗门

Angular的JQLite为此提供了'addClass'和'removeClass'函数:

angular.element($event.target).parent().addClass('highlight');

请参阅此处的文档:https : //docs.angularjs.org/api/ng/function/angular.element

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从javascript中的焦点模糊事件获取元素值

来自分类Dev

如何使用jquery更改按钮单击上的焦点contenteditable元素的类?

来自分类Dev

如果我只知道父元素的类或 ID,如何在子文本区域上设置模糊侦听器?

来自分类Dev

Javascript - 如何更改类的父类?

来自分类Dev

如果子级包含某些字符串链,如何更改父级元素的CSS类

来自分类Dev

更改父元素 jquery 中所有元素的类

来自分类Dev

JS,如何仅更改父元素

来自分类Dev

如何更改父类方法的参数?

来自分类Dev

如何将父类中的元素更改为带有JAXB批注的派生类中的属性?

来自分类Dev

通过更改ngModel来更新父元素的类

来自分类Dev

在父悬停时更改子元素的CSS类

来自分类Dev

使用基于父元素类的 jquery 更改跨度文本

来自分类Dev

Vuetify 如何模糊、聚焦点击的芯片?

来自分类Dev

当有多个元素时如何向父元素添加类

来自分类Dev

如何在父元素Jquery中删除某个类的元素

来自分类Dev

更改焦点上的高度元素

来自分类Dev

如何在Angular JS中更改时将类添加/删除到复选框的父元素

来自分类Dev

贬低父类的元素

来自分类Dev

更改子元素的颜色,但仅在将特定父元素悬停时(所有父类都具有相同的类)

来自分类Dev

如何动态地将类添加到焦点输入字段的父div?

来自分类Dev

如何在焦点输入的同一父项中使用slideDown类

来自分类Dev

Ruby Watir,如何更改DOM元素的类?

来自分类Dev

如何更改列表元素的类名

来自分类Dev

如何使用JavaScript更改元素的类?

来自分类Dev

如何更改类中每个元素的颜色

来自分类Dev

如何更改类元素中按钮的文本?

来自分类Dev

如何在单击时选择具有ID /类的父级元素而不是父级元素?

来自分类Dev

如何在AngularJS的父元素上单击添加类?

来自分类Dev

如何在AngularJS的父元素上单击添加类?

Related 相关文章

  1. 1

    如何从javascript中的焦点模糊事件获取元素值

  2. 2

    如何使用jquery更改按钮单击上的焦点contenteditable元素的类?

  3. 3

    如果我只知道父元素的类或 ID,如何在子文本区域上设置模糊侦听器?

  4. 4

    Javascript - 如何更改类的父类?

  5. 5

    如果子级包含某些字符串链,如何更改父级元素的CSS类

  6. 6

    更改父元素 jquery 中所有元素的类

  7. 7

    JS,如何仅更改父元素

  8. 8

    如何更改父类方法的参数?

  9. 9

    如何将父类中的元素更改为带有JAXB批注的派生类中的属性?

  10. 10

    通过更改ngModel来更新父元素的类

  11. 11

    在父悬停时更改子元素的CSS类

  12. 12

    使用基于父元素类的 jquery 更改跨度文本

  13. 13

    Vuetify 如何模糊、聚焦点击的芯片?

  14. 14

    当有多个元素时如何向父元素添加类

  15. 15

    如何在父元素Jquery中删除某个类的元素

  16. 16

    更改焦点上的高度元素

  17. 17

    如何在Angular JS中更改时将类添加/删除到复选框的父元素

  18. 18

    贬低父类的元素

  19. 19

    更改子元素的颜色,但仅在将特定父元素悬停时(所有父类都具有相同的类)

  20. 20

    如何动态地将类添加到焦点输入字段的父div?

  21. 21

    如何在焦点输入的同一父项中使用slideDown类

  22. 22

    Ruby Watir,如何更改DOM元素的类?

  23. 23

    如何更改列表元素的类名

  24. 24

    如何使用JavaScript更改元素的类?

  25. 25

    如何更改类中每个元素的颜色

  26. 26

    如何更改类元素中按钮的文本?

  27. 27

    如何在单击时选择具有ID /类的父级元素而不是父级元素?

  28. 28

    如何在AngularJS的父元素上单击添加类?

  29. 29

    如何在AngularJS的父元素上单击添加类?

热门标签

归档