javascript - jqlite 中 .first() 的替代方案

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');