2017-10-31 7 views
0

私はコンストラクタ関数_()を作成し、プロトタイプのいくつかのメソッド、 "列挙"メソッドを記述して、クラスまたはid HTML要素をオーバーライドしました。連鎖機能:どのように最初の関数の結果をキャンセルするには?

NodeList(たとえばitElement(2))の特定の要素を参照する必要がある方法があります。私はチェーン機能(_ ('.test'). item (2))を使用しています。 addMiClassメソッドを使用して、正確にelement(2)にクラスを追加しますが、そのクラスはすべての要素_ ('.test')に追加されています。

最初の関数の結果をキャンセルするには(_ ('test'))

'use strict'; 
 

 
function _(arg) { 
 

 
    if (!(this instanceof _)) { 
 
    return new _(arg); 
 
    } 
 

 
    var self = this; 
 
    //we can transmit a string 
 
    if (typeof arg === "string") { 
 
    this.elements = arg.split(','); 
 
    this.element = []; 
 
    for (var i = 0; i < this.elements.length; i++) { 
 
     this.element.push(document.querySelectorAll(this.elements[i])); 
 
    } 
 
    } 
 
    //if transmit object 
 
    if (typeof arg === "object") { 
 

 
    this.element = []; 
 

 
    for (var i in arg) { 
 
     // var index = Object.keys(arg).indexOf(i);//for gettinf index 
 
     this.element.push(document.querySelectorAll(arg[i])); 
 
    } 
 
    } 
 
} 
 

 
_.prototype = { 
 

 
    //method for bust elements 
 
    enumeration: function(elements, callback) { 
 

 
    for (var i = 0; i < elements.length; i++) { 
 

 
     [].forEach.call(elements[i], callback); 
 

 
    } 
 
    return this; 
 
    }, 
 
    //method for adding class 
 
    addMyClass: function(nameClass) { 
 

 
    this.enumeration(this.element, function(el) { 
 
     // do whatever 
 
     el.classList.add(nameClass); 
 
    }); 
 

 
    return this; 
 
    }, 
 

 
    //for specific elements 
 
    itElement: function(element) { 
 
    element -= 1; 
 
    for (var i = 0; i < this.element.length; i++) { 
 

 
     [].forEach.call(this.element[i], function(el, i) { 
 

 
     if (i === element) { 
 
      return el; 
 
     } 
 

 
     }); 
 
    } 
 

 
    return this; 
 
    } 
 

 
} 
 

 
//////////////////use my object 
 
_('.first').itElement(2).addMyClass('test');
<div class="first">ff</div> 
 
<div class="first">ff</div> 
 
<div class="first">ff</div> 
 
<div class="second">ff2</div> 
 
<div class="third">ff3</div>

答えて

0

あなたが、あなたは正確にあなたが望む要素をラップ新しいインスタンスを返す必要はありませreturn thisなければなりません。 (Btw、forEachコールバックからreturnにしようとするのは無駄です)。

+0

ありがとうございます!私はどこを正しくしなかったのか分かった – Vladislav

関連する問題