jqlite中.first(）的替代方案

alternative for .first() in jqlite

本文关键字：方案 first jqlite      更新时间：2023-09-26

我已经使用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

在您的情况下，问题是您有多个id为父级的元素，因此在使用querySelector时，它将返回id为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');
相关文章：