javascript .addClass 不适用于 jqLite / Angular.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26840308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.addClass not working on jqLite / Angular.js
提问by Nkogo
I've been struggling lately to understand why the .addClass function was not working on jqLite
我最近一直在努力理解为什么 .addClass 函数在 jqLite 上不起作用
element.addClass('active')
Element returns me an array of html elements, tested that over and over to be sure. I can hide(), show() , add a .css or get one, or even set .attr , but addClass resists me.
Element 返回给我一个 html 元素数组，并反复测试以确保。我可以 hide(), show() ，添加一个 .css 或获取一个，甚至设置 .attr ，但 addClass 抵制我。
edit: element is a path in a svg block , and this is the reason that seems to make the addClass function irrelevant, still trying to fix it.
编辑： element 是 svg 块中的路径，这就是似乎使 addClass 函数无关紧要的原因，仍在尝试修复它。
element is a jqLite object
元素是一个 jqLite 对象
Thank you.
谢谢你。
回答by Reyraa
JqLite methods don't work with elements selected by plain javascript DOM selectors like querySelectoror document.getElementById(). if you need so, first select it with javascript selectors then wrap it in angular.element:
JqLite 方法不适用于由普通 javascript DOM 选择器（如querySelector或 ）选择的元素document.getElementById()。如果需要，请先使用 javascript 选择器选择它，然后将其包装在angular.element：
var element = document.querySelector('a[target="_blank"]');
var angElement = angular.element(element);
or simply
或者干脆
var myElement = angular.element( document.querySelector('a[target="_blank"]') );
then you could use JqLitemethods:
first example:
那么你可以使用JqLite方法：
第一个例子：
angElement.addClass('active');
second one:
第二个：
myElement.addClass('active');
回答by dinodsaurus
I think this is generally a bad idea... Adding classes in angular is usually not done jquery style, you should use ng-class directive https://docs.angularjs.org/api/ng/directive/ngClass
我认为这通常是一个坏主意......在 angular 中添加类通常不是 jquery 风格，你应该使用 ng-class 指令https://docs.angularjs.org/api/ng/directive/ngClass
the directive is quite simple to use..
该指令使用起来非常简单..
<div ng-class="{active: show}"></div>
This div will get class active when $scope.showis true
当这个div会得到积极类$scope.show是true
回答by Srinivas Paila
You have to use a directive to add and remove classes
您必须使用指令来添加和删除类
HTML:
HTML：
<div ng-controller="MyCtrl">
<input type="button" active value='One' />
<input type="button" active value='Two' />
<input type="button" active value='Three' />
</div>
JS:
JS：
var app = angular.module('myApp',[]);
app.directive('active', function() {
return {
link: function(scope, element, attrs) {
element.bind('click', function() {
//Remove the active from all the child elements
element.parent().children().removeClass('active');
//Add active class to the clicked buttong
element.addClass('active');
})
},
}
});
function MyCtrl($scope) {
}
Here is the linkto the fiddle.
这是小提琴的链接。
