Angular JS 条件逻辑检查 "class name" 是否存在

Question

Angular 下面的 JS 代码在 Mouseover 和 Mouseout 上运行良好。在 JS 代码上添加条件逻辑方面需要帮助。

如果 class 名称 "active" 存在，img src 路径必须在 "overImg" 中，即使用户 mouseover 和 mouseout。但是，一旦用户从元素中移出鼠标，当前行为就会删除 overImg。活动状态必须不同于导航元素的其余部分。

AngularJS:

.directive('eleHoverAction', function() {
return {
    link: function (scope, elem, attrs) {
        var imgObj = $(elem).find('img');
        var upImg = attrs.eleUpImgSrc;
        var overImg = attrs.eleOverImgSrc;

        elem.bind('mouseover', function () {
            $(imgObj).attr("src", overImg);
            scope.$apply();
        });
        elem.bind('mouseout', function() {
            $(imgObj).attr("src", upImg);
            scope.$apply();
        });
    }
  };                
});

HTML:

 <li class="menu-item menu-item--category active" ele-hover-action ele-up-img-src="images/test1.png" ele-over-img-src="images/test1-over.png">
   <a href="#"><img src="images/test1.png" oversrc="images/test1-over.png"  alt=""/><span>Test1</span></a>
</li>
<li class="menu-item menu-item--category" ele-hover-action ele-up-img-src="images/test2.png" ele-over-img-src="images/test2-over.png">
  <a href="#"><img src="images/test2.png" oversrc="images/test2-over.png"  alt=""/><span>Test2</span></a>
</li>

Answer 1

最明显的方法是向您的 "mouseout" 处理程序添加一个 if 语句来检查元素 hasClass 是否处于活动状态：

.directive('eleHoverAction', function() {
return {
    link: function (scope, elem, attrs) {
        var imgObj = elem.find('img');
        var upImg = attrs.eleUpImgSrc;
        var overImg = attrs.eleOverImgSrc;

        elem.bind('mouseover', function () {
            imgObj.attr("src", overImg);
            scope.$apply();
        });
        elem.bind('mouseout', function() {
            if (!elem.hasClass("active")) {
                imgObj.attr("src", upImg);
            }
            scope.$apply();
        });

        if (elem.hasClass("active")) {
            imgObj.attr("src", overImg);
        } else {
            imgObj.attr("src", upImg);
        }
    }
  };                
});

我继续根据指令属性设置图像的 src 属性。如果你不想要它，你可以把它拿掉。此外，在 jQuery 调用中包装 elem 是多余的，因为 Angular 元素已经包装在 jQuery（如果在 Angular 加载时可用）或其自己的 jQLite .否则，您将无法调用 elem.bind.

Try it in a fiddle.

Angular JS 条件逻辑检查 "class name" 是否存在

Angular JS conditional logic to check "class name" exists

angularjs

angularjs-scope