在 AngularJS 中使用 jquery 选择只有一个子元素

发布时间: 2017/4/16 4:28:49
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

所以,我在 jQuery 的工作函数,但然后我决定为我的应用程序使用角。只是无法找到的方式,所以它将 CSS 添加到只有一个子元素。

正在工作的 Jquery 代码

$('.list-div').on('mouseenter', function(){
    $(this).find('.client-jar').css('opacity','1');
  }).on('mouseleave', function() {
    $(this).find('.client-jar').css('opacity','0');
  });

当前 html

<ul>
        <li ng-repeat="one in ones | orderBy:'-date'">
            <div class="list-div">
                <div class="row jar-div first-jar-div" ng-mouseover="showButton()" ng-mouseleave="hideButton()">
                    <div class="col-xs-7 description-div">
                        <p class="version">{{ one.version }}</p>
                        <p class="date">{{ one.date }}</p>
                    </div>
                    <div class="col-xs-5 buttons-div">
                        <div class="list-button client-jar">
                            <a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
                        </div>
                        <div class="list-button server-jar">
                            <a class="list-link">Server jar</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

和当前角 JS

$scope.showButton = function(){
    angular.element('.list-div').find('.client-jar').css('opacity','1');
  };

  $scope.hideButton = function(){
    angular.element('.list-div').find('.client-jar').css('opacity','0');
  };

解决方法 1:

我会用︰ https://docs.angularjs.org/api/ng/directive/ngMouseenter

<button ng-mouseenter="hoverState = true">mouse in mouse out</button>

然后用︰ https://docs.angularjs.org/api/ng/directive/ngMouseleave

<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false">mouse in mouse out</button>

在这一点上你有悬停在和关闭标志。你可以现在选择与此标志 ng-class 到设置和取消设置 CSS 类,其中包含你不透明度的东西和任何未来的 CSS 动画等等等等︰ https://docs.angularjs.org/api/ng/directive/ngClass

<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">mouse in mouse out</button>

没有所需的 jQuery,AngularJS 是完全不同的方式把事情。

<style>
.opacity-class .client-jar{
   opacity:0;
}
</style>
<ul>
        <li ng-repeat="one in ones | orderBy:'-date'">
            <div class="list-div">
                <div class="row jar-div first-jar-div" ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">
                    <div class="col-xs-7 description-div">
                        <p class="version">{{ one.version }}</p>
                        <p class="date">{{ one.date }}</p>
                    </div>
                    <div class="col-xs-5 buttons-div">
                        <div class="list-button client-jar">
                            <a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
                        </div>
                        <div class="list-button server-jar">
                            <a class="list-link">Server jar</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
官方微信
官方QQ群
31647020