jQuery插件有问题

Question

我正在将一些jQuery转换为插件，但出现了错误。 这是道德的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;来解决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.
    });
};