.each（）ステートメントで生成されたBXスライダーの各インスタンスに変数を添付します

Question

未知の数のギャラリーにBXスライダーを使用してスライドショーを作成するjQueryがあります。マークアップはPHP CMSによって出力されるため、ページに必要なギャラリーの数を自信を持つことはできません。

$(function () {

    // Use a class rather than an ID
    var $slider = $('.gallery');

    // For each result
    $slider.each(function (index, element) {

        // If there is more than 1 image
        if ($(element).find('img').length > 1) {

            // Initialise a slider using the current index value
            $slider.eq(index).bxSlider({
                auto: false,
                pager: false,
                duration: 500
            });

        }

    });

});

パブリック機能を使用するには、BXスライダーの各インスタンスを変数として定義する必要があります。

そう var slider = $('#gallery').bxSlider(); 標準でしょう。この各ステートメント内でこれらの変数をその場で生成するにはどうすればよいですか？

Answer 1

このようなものをお探しですか？

$(function () {

    var bxSliderInstances = {};

    // Use a class rather than an ID
    var $slider = $('.gallery');

    // For each result
    $slider.each(function (index, element) {

        // If there is more than 1 image
        if ($(element).find('img').length > 1) {

            // Initialise a slider using the current index value
            bxSliderInstances["slider" + index] = $slider.eq(index).bxSlider({
                auto: false,
                pager: false,
                duration: 500
            });

        }

    });

});

bxSliderInstances 必要に応じて使用できる連想配列としてすべてのスライダーインスタンスが含まれます。

例えば bxSliderInstances.slider1 また `bxSliderInstances["slider1"] あなたに最初を与えます bxSlider 実例。