0

javascriptを使用してcssクラスセレクターを管理するオブジェクトを作成しました。

リテラルオブジェクトの使用は機能していますが、別のOOP方法を使用していません。

オブジェクトリテラル

var className = {
    getList : function(element,cssClass){
        return element.className.split(' ');
    },
    has : function(element,cssClass){
        var classList=element.className.toLowerCase().split(' ');
        return classList.has(cssClass.toLowerCase());
    },
    add : function(element,cssClass){
        if(className.has(element,cssClass)==false){
            element.className+=' '+cssClass;
        }
    },
    remove : function(element,cssClass){

        var index = element.className.toLowerCase().split(' ').indexOf(cssClass.toLowerCase());

        if( index > -1 ){ //found
            var classList=element.className.split(' ');

            classList.splice(index,1);
            element.className=classList.join(' ');
        }
    }
}

構築されたオブジェクト。（動作していません）

var cssClass = new function(element){
    var that=this;

    this.getList = function(){
        return element.className.split(' ');
    }

    this.has = function(className){
        var classList=element.className.toLowerCase().split(' ');
        return (classList.indexOf(className.toLowerCase())>-1);
    }

    this.add = function(className){
        if(that.has(className)==false){
            element.className = className+' '+element.className;
        }
    }

    this.remove = function(className){

        var index = element.className.toLowerCase().split(' ').indexOf(className.toLowerCase());

        if( index > -1 ){ //found
            var classList=element.className.split(' ');

            classList.splice(index,1);
            element.className=classList.join(' ');
        }
    }
}

このエラーが発生します：

cssClass(d1).add('class1');

行：2メッセージ： "'[object Object]' is not a function（evaluating'cssClass（d1）'）" sourceId：4600193304

ボーナスの質問：これは、JavaScriptを使用してCSSクラスを管理するための最良の方法ですか？標準のAPIはありますか？これを書くために分離されたプレーン関数を使用する必要がありますか？

4

1 に答える 1

0

コンストラクターを作成してすぐに呼び出すため、最初newから削除する必要があります。new function代わりに、使用する要素を渡すときにコンストラクターを呼び出す必要があります。例えば

var cssClass = function(element) {
...
}

その後：

new cssClass(d1).add('class1');

これがJSFiddleです：http：//jsfiddle.net/55jkr/1/

ボーナスの質問に答えるには、CSSクラスを処理する最良の方法は、jQueryなどの標準ライブラリを使用することです。これらのライブラリは、初期実装の時間を節約し、テストも行われているためです。それが選択肢ではない場合、あなたのアプローチは問題ありません。

于 2012-06-23T09:09:42.783 に答える