2017-03-09 1 views
1

私は非常にjavascriptを新しくしています。Javascript:他のプロパティを通じて選択されたDOMオブジェクトでオブジェクトメソッドを実行します。

ここでは、同じオブジェクトの別のプロパティで選択したDOM要素に対してオブジェクトメソッドを実行するのに失敗しています。私は思考に何か間違っていると思う!

ご協力いただきありがとうございます。

var Arrow = function() { 
    this.current = $('.arrow'); 
    this.previous = null; 
    this.bend = function() { 
     // do bend 
    }; 
}; 

var arrow = new Arrow(); 

arrow.current.bend(); 
+0

'$をお勧めしたい( '矢印。');'おそらく複数の要素(すべてのクラスで 'arrow')を選択します。関数 'bend'を' Arrow'に追加しますが、 'arrow.current'にある関数を呼び出そうとします。 – Arg0n

+0

'arrow.bend();' – dfsq

答えて

3

bend()は現在の方法ではありません。 arrow.bend()を使うと、this.currentを使って現在のものにアクセスすることもできます。

1

arrow.current.bendは定義されていません。

あなたは定義されています:

  • this.currentをDOM要素の配列として。
  • this.bendとしての機能を持つメソッドです。

したがって、あなたが呼び出すことができますのDOM

  • arrow.bendの

    • arrow.current >>戻り値Array()>>関数曲がりを実行します。
    • arrow.current.bend()は存在しません。

    また、arrow.currentは配列です。要素は、デフォルトでは、曲げ要素を持っていない、あなたが任意の時点で追加されていない、前に言ったように、しかし

    for (element of arrow.current) { element.bend(); } 
    

    :あなたは、最初の要素のそれぞれを取得する必要があると思います。矢印のみが曲げ特性を持つ。

    これがなぜうまくいかないのか、この案内が欲しいと思います。 しかし、あなたが達成しようとしていることについて質問をする場合は、おそらくそれを修正するのを助けることができます。

  • 1

    arrowオブジェクトに電話する必要があります。 bend()機能では、必要な作業を行います。

    var Arrow = function() { 
        this.current = $('.arrow'); 
        this.previous = null; 
        this.bend = function() { 
         // do bend 
         current.style = 'bent'; 
        }; 
    }; 
    
    var arrow = new Arrow(); 
    arrow.bend(); 
    
    1

    です。

    あなたは第二の可能な問題はthis.current = $('.arrow');である

    arrow.bend(); // not arrow.current.bend() 
    

    間違ったオブジェクトを右メソッドを呼び出しました。 DOMから要素を取得するには、要素が完全に読み込まれていることを確認する必要があります。私は、次の

    var Arrow = function($arrow) { 
     
         this.current = $arrow; 
     
         this.previous = null; 
     
        }; 
     
    
     
        // To avoid creating the `bend` in every instance of Arrow 
     
        Arrow.prototype.bend = function() { 
     
          console.log(this.current.attr('id')); 
     
         }; 
     
        
     
        $(function() { 
     
         // Now it's certain that the DOM is completely loaded 
     
         var arrow = new Arrow($('.arrow').first()); 
     
        
     
         arrow.bend(); 
     
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     
    <div class="arrow" id="toto">arrow<div>