$を使用すると動作しません

Question

クラスにいくつかのイベントを追加するスクリプトを実行しようとしています。 これらのイベントは、このクラスの中の1つの特定のDIVにのみ追加します。

$(".drag").pep({ 
start: function() { 
     $(".drag").addClass('color'); 
     $('.drag').next(".text").fadeIn("slow"); 
     $(".text-video").fadeOut("fast"); 

    }, 
stop: function() { 
     $('.drag').removeClass('color'); 
     $('.drag').next(".text").fadeOut("slow"); 
    } 

    }); 

これは動作しますが、それは一度にすべての.drag項目をトリガ...そして私は、私はすべてのイベントを追加したためにドラッグしています一つだけをしたい：私はpep.jsを使用しています。

私はそれを書くことを試みた：

$(".drag", this).addClass('color'); 

か：

$(this).addClass('color'); 

か：

$(this.element).addClass('color'); 

しかし、すべてはうまくいきませんでした。 誰かがアイデアを持っていますか？

UPDATE：

私はうまくいけば私の問題を説明しJSFiddleを作りました。ご覧のとおり

https://jsfiddle.net/ke6d5r1h/

は、例えば.colorクラスだけでなく、他に、ドラッグされたDIVに追加されません。これは私が変えたいものです。

Answer 1

イベントハンドラでconsole.log(arguments)を使用すると、ハンドラに2つの引数、イベントオブジェクトとコンテキストを含むオブジェクトが渡されていると判断できました。コンテキストには、イベントターゲットのjQueryオブジェクトであるプロパティ$elがあります。

start: function(e,a) { 
    a.$el.addClass('color'); 
    a.$el.next(".text").fadeIn("slow"); 
    $(".text-video").fadeOut("fast"); 
}, 

https://jsfiddle.net/85tffqhL/

e.targetまた、あなたの要素への参照を与えるだろう。