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"));

非常感谢帮助。

这是 ALL 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.
    });
};

遇到jQuery插件问题

1 个答案: