Question

我已经使用angularjs指令创建了一个下拉列表，该指令工作正常，此时我在指令本身内编写所有css，在鼠标悬停下拉列表选项时的一个功能中它应该更改背景颜色为#27A1EC - 蓝色，文字颜色为白色，鼠标离开则背景颜色为白色，文字颜色为实际颜色，一切正常，但我面临的一个问题是，我们在JQLite中没有JQuery .find()选项我试过使用如下所示

我使用angular.element(document.querySelector('#parent'))代替elm.find('a').first()，我不知道这是否正确

 elm.find("a").bind("mouseover", function() {
        scope.actualColor = scope.textColor.color;
        //elm.find('a').first().css('color', 'white').css('background-color', '#27A1EC');
        angular.element(document.querySelector('#parent')).css('color', 'white').css('background-color', '#27A1EC');
      });

 elm.find("a").bind("mouseleave", function() {
        //elm.find('a').first().css('color', scope.actualColor).css('background-color', 'white');
        angular.element(document.querySelector('#parent')).css('color', scope.actualColor).css('background-color', 'white');
      });

现在，当我将鼠标悬停在下拉列表中的 Parent2 时，悬停颜色正在重定向并正在应用于 Parent1

任何人都可以告诉我一些解决方案，

Plunker

Answer 1

在您的情况下，问题是您有多个id为父元素的元素，因此在使用querySelector时，它将返回标识为parent的第一个元素。

您可以使用.eq(0)代替first()

elm.find('a').eq(0).css('color', 'white');

但更好的解决方案是将父类分配给父元素而不是像

这样的id

<a class='parent' href='#' ng-click='getValue(optGroupLabel,optGroupValue)'>{{optGroupLabel}}<span class='value'>{{optGroupValue}}</span></a>

然后

angular.element(elm[0].querySelector('.parent')).css('color', scope.actualColor).css('background-color', 'white');

jqlite中.first（）的替代方法

1 个答案: