jQueryプラグインのヘルプ。すべての項目に影響しません

Question

タイトルには少し基本的なプラグインに問題があります。下の例で分かるように、2つのdivには画像が含まれています。どちらかの下にある黒いボックスをクリックすると、両方のdivが非表示になります。どうしてこれなの？それはどのように固定することができます。..

例： http://www.matthewruddy.com/slider/slider.html

コードサンプル：

(function($){ 
$.fn.extend({ 

premiumSlider: function(options) { 

    var defaults = { 
    width: 520, // Set width 
    height: 340, // Set height 
    startImage: 0, // Choose start image 
    tranSpeed: 800, // Time taken to transition between images 
    pauseTime: 3000, // Time slider remains paused before transitioning 
    autoPlay: true, // Play the slider on load; true/false 
    pauseHover: true, // Pause the slider on mouse hover 
    transition: 'Slide', // Transition style 
    easing: 'easeInOutExpo', // Easing style (slide only) 
    preload: true, // Whether or not to preload images 
    preloadIcon: 'images/loading.gif', 
    preloadColour: '#fff' 
    } 

     var options = $.extend(defaults, options); 

    return this.each(function(){ 
     var vars = options; 
     var obj = $(this); 
     var stuff = obj.find('.slider-wrap'); 

     $('.icon').click(function(){ 
     obj.hide(); 
     }); 
    }); 
} 
}); 
})(jQuery); 

Answer 1

を：次のようにクリック機能を変更

return this.each(function(){ 
     var vars = options; 
     var obj = $(this); 
     var stuff = obj.find('.slider-wrap'); 

     $('.icon').click(function(){ 
     obj.hide(); 
     }); 
    }); 

ライン：

var stuff = obj.find('.slider-wrap'); 

がクラス "スライダー・ラップ" を見つけることです、これ両方のスライダが使用されます。それらをそれぞれ別々に隠すことを検討したいかもしれません。

Answer 2

$('.icon').click(function(){ 
    obj.hide(); 
}); 

問題はセレクタが両方のアイコンに適用されるということです。あなたは.children()を使用していることを修正することができます。

obj.children('.icon').click(function(){ 
    obj.hide(); 
}); 

それがより深く入れ子になった場合、あなたは.find()を使用することができます。

obj.find('.icon').click(function(){ 
    obj.hide(); 
}); 

Answer 3

.iconを探しているときに検索をスコープされていませんので。ここにあなたの関数であるためにです

$('.icon', obj).click(function() 
{   
obj.hide();  
} 
);