0

我正在将一些 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);
}
4

1 回答 1

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.
    });
};
于 2012-06-03T00:45:00.970 回答