間接的にJQuery関数を実行できません

Question

タイトルが非常に間違っていると思いますので、この質問に適切なタイトルを教えてください。

私はプラグインLightSliderと呼ばれ、これはあなたがLightSliderは、私が使用しようとしているものをそのうちの1つは、あまりにもパブリックメソッドを提供しています

var lightSlider = $("#lightSlider").lightSlider({ // Code Block 1 
    item: 1, 
    mode: 'fade', 
    keyPress: true, 
    pager: false, 
    controls: false 
}); 

スライダーをinitalizeどのようになっている私のWebページ上の画像のスライダーを持っています。私は前と次のスライドに行くカスタムボタンを作成しようとしている。このこと

$('.arrow-left[data-slider="lightSlider"]').on('click', function(){ 
    lightSlider.goToPrevSlide(); // Code Block 2 
}); 

と対応するHTML

<div class="arrow-left" data-slider="lightSlider"> 
    <i class="fa fa-chevron-left"></i> // Code Block 3 
</div> 

ための適切なコードです。これは完全に正常に動作しますが、私は（ページ上に複数のスライダーを持っており、それらのすべてに固有のIDを割り当て、javascriptのコードを書きますブロック2）は、ボタンごとに何度も何度も効率的に見えないので、私はdata-属性を使ってプロセスを自動化することを考えました。試したものについて

$('.arrow-left').on('click', function(){ 
    var target = $(this).attr('data-slider'); 
    console.log(target); 
    target.goToPrevSlide(); 
}); 

しかし、それはうまくいかなかった。私が受け取るエラーはtarget.goToPrevSlide() is not a functionです。うまくいっていないのですが、targetが値lightSliderに置き換えられると思いますか？

console.logの出力はlightSliderです。私の質問はなぜ動作しなかったのでしょうか？回避策は何ですか？あなたがしたい何

Answer 1

はこれです：

var lightSlider = $("#lightSlider").lightSlider({ // Code Block 1 
    item: 1, 
    mode: 'fade', 
    keyPress: true, 
    pager: false, 
    controls: false 
}); 
# Assign the `data-slide` attribute of element `#lightSlider` to the instance of `lightSlider`. 
$("#lightSlider").data('slide', lightSlider); 

あなたはその後、jqueryの経由でノードから直接lightSlideにアクセスできるようになります。

jquery dataのドキュメントをご覧ください。

Answer 2

これについては、いくつかの方法があります。一つは、独自のコンテキスト内の各スライダーを初期化するために、次のようになります。

$('.slider-wrapper').each(function() { 
    var lightSlider = $('.slider', this).lightSlider({ 
     item: 1, 
     mode: 'fade', 
     keyPress: true, 
     pager: false, 
     controls: false 
    }); 
    $('.arrow-left', this).on('click', function(){ 
     lightSlider.goToPrevSlide(); 
    }); 
}); 

HTML：

<div class="slider-wrapper"> 
    <div class="slider"> 
     ... 
    </div> 
    <div class="arrow-left"> 
     <i class="fa fa-chevron-left"></i> // Code Block 3 
    </div> 
</div> 

この方法では、機能ブロック内lightSlider変数はいつもにもかかわらず、初期化されています特定の要素に対応同じページに複数の「スライダ」要素があります。