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)falseになることはないため、長さがゼロになる可能性がありますが、falseにはなりません。これは、プラグインが期待どおりに機能しないことを意味します。長さを確認する必要があります。

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の内部にあると期待するものではないことです。おそらく、コールバックがトリガーされたときです。あなたはこのようなことをしたいです：setIntervalsetTimeoutthiswindow

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 に答える