Возникли проблемы с плагином jQuery

Question

Я превращаю некоторые jQuery в плагин, но я придумываю ошибки. Вот код mormal jQuery.

var current = ($("#gallery a.show")? $("#gallery a.show") : $("#gallery a:first")); 

Вот код плагин JQuery

var current = ($(this).find("a.show")? $(this).find("a.show") : $(this).find("a:first")); 

Помощь была бы оценена.

ВСЕ Код плагина jQuery.

$(window).load(function(){ 
    $("#gallery").csstubeslider(); 
}); 

$.fn.csstubeslider = function(){ 
    $(this).animate({'opacity': '1'}, 500); 
    $(this).find(".caption").css("opacity", 0.7); 

    $(this).find("a").css("opacity", "0"); 
    $(this).find("a.show").css("opacity", "1"); 

    var hasplayed = false; 
    if(hasplayed == false){ 
     setTimeout(function hello(){ 
      $(this).find(".caption").animate({"height": 0, "opacity": 0}, 500); 
      hasplayed == true; 
     }, 4500); 
    } 

    setInterval(function(){ 
     var current = ($(this).find("a.show")? $(this).find("a.show") : $(this).find("a:first")); 
     var next = ((current.next())? (current.next().hasClass("caption"))? $(this).find("a:first") : current.next() : $(this).find("a:first")); 
     var content = next.find("img").attr("rel"); 

     next.addClass("show").animate({"opacity": "1.0"}, 500); 
     current.removeClass('show').animate({"opacity": "0"}, 500); 

     setTimeout(function(){ 
      $(this).find(".caption").animate({"height": 0, "opacity": 0}, 500); 
     }, 4500); 
     $(this).find(".content").html(content); 
    }, 1000); 
} 

и вот код JQuery.

$(window).load(function(){ 
    $("#gallery").animate({'opacity': '100'}, 5000); 
    $("#gallery .caption").css("opacity", 0.8); 
    slideshow(); 
}); 


function slideshow(){ 
    $("#gallery a").css("opacity", "0"); 
    $("#gallery a.show").css("opacity", "1"); 

    var content = $("#gallery a.show").find("img").attr("rel"); 
    $("#gallery .content").html(content); 

    var hasplayed = false; 

    if(hasplayed == false){ 
     setTimeout(function hello(){ 
      $("#gallery .caption").animate({"height": 0, "opacity": 0}, 500); 
      hasplayed == true; 
     }, 4500); 
    } 

    setInterval("playimages()", 5500); 
} 

function playimages(){ 
    var current = ($("#gallery a.show")? $("#gallery a.show") : $("#gallery a:first")); 
    var next = ((current.next())? (current.next().hasClass("caption"))? $("#gallery a:first") : current.next() : $("#gallery a:first")); 
    var content = next.find("img").attr("rel"); 

    next.addClass("show").animate({"opacity": "1.0"}, 500); 
    current.removeClass('show').animate({"opacity": "0"}, 2000); 
    $("#gallery .caption").css("height", 0).animate({"height": 60, "opacity": 0.8}, 500); 
    setTimeout(function hello(){ 
     $("#gallery .caption").animate({"height": 0, "opacity": 0}, 500); 
    }, 4500); 

    $("#gallery .content").html(content); 
} 

Answer 1

Это не делать то, что вы ожидаете его:

var current = ($("#gallery a.show")? $("#gallery a.show") : $("#gallery a:first")); 

Это эквивалентно var current = $('#gallery a.show'); так $(x) никогда не будет ложным, оно может иметь нулевую длину, но это не будет ложным , Это означает, что ваш плагин не делать то, что вы ожидаете, либо, вы хотите, чтобы проверить длину:

var current = $(this).find("a.show").length ? $(this).find("a.show") : $(this).find("a:first"); 

Или лучше:

// This avoids a double `find('a.show')`. 
var current = $(this).find('a.show'); 
if(current.length == 0) 
    current = $(this).find('a:first'); 

Ваша следующая проблема состоит в том, что this не то, что вы ожидаете он должен находиться внутри обратных вызовов setInterval и setTimeout, this, вероятно, будет window при срабатывании обратного вызова. Вы хотите сделать что-то вроде этого:

var _this = this; 
setTimeout(function hello(){ 
    // Use '_this' instead of 'this' in here. 
}, ...); 

Вышесказанное также относится и к вашим setInterval вызовов.

Кроме того, внутри вашего плагина, this уже объект JQuery, так что вам не нужно $(this), просто this будет делать. И ваш плагин не в цепочке, но вы можете исправить это с помощью простого return this;:

$.fn.csstubeslider = function() { 
    //... 
    return this; 
}; 

Вы можете столкнуться с проблемами, если вы пытаетесь связать свой плагин для нескольких вещей сразу, обычная картина такова:

$.fn.csstubeslider = function() { 
    return this.each(function() { 
     // 'this' in here is just one matching element so 
     // we wrap some jQuery around it and use '$this' 
     // inside here. 
     var $this = $(this); 

     // The rest of your plugin code goes here, you can 
     // use '$this' in here to avoid multiple calls to $(). 
     // You'll also be able to use '$this' inside your 
     // 'setTimeout' and 'setInterval' callbacks too. 
    }); 
};