8

最近、.addClass 関数が jqLit​​e で機能しない理由を理解するのに苦労しています

element.addClass('active')

Element は html 要素の配列を返し、それを何度もテストして確認しました。hide() 、 show() 、 .css の追加または取得、または .attr の設定さえできますが、 addClass は抵抗します。

edit: 要素は svg block 内のパスです。これが addClass 関数を無関係にしているように見える理由であり、まだ修正しようとしています。

要素は jqLit​​e オブジェクトです

ありがとうございました。

4

3 に答える 3

25

querySelectorJqLite メソッドは、や などのプレーンな JavaScript DOM セレクターによって選択された要素では機能しませんdocument.getElementById()。必要な場合は、最初に javascript セレクターで選択してから、次のようにラップしangular.elementます。

var element = document.querySelector('a[target="_blank"]');
var angElement = angular.element(element);

または単に

var myElement = angular.element( document.querySelector('a[target="_blank"]') );

JqLite次に、メソッドを使用できます。
最初の例:

angElement.addClass('active');

二つ目：

myElement.addClass('active');
于 2014-11-22T13:08:47.177 に答える
3

これは一般的に悪い考えだと思います... angularでクラスを追加することは通常jqueryスタイルでは行われません.ng-classディレクティブhttps://docs.angularjs.org/api/ng/directive/ngClassを使用する必要があります

ディレクティブの使い方は非常に簡単です。

<div ng-class="{active: show}"></div>

この div は、次の場合にクラスをアクティブにし$scope.showますtrue

于 2014-11-10T09:42:10.493 に答える
2

クラスを追加および削除するには、ディレクティブを使用する必要があります

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:

    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) {
    }

これがフィドルへのリンクです。

于 2014-11-10T09:47:15.380 に答える