0

私は現在ES6を学習中です。通常は JQuery プラグインとして記述していたカルーセルを作成しようとしていますが、代わりに ES6 モジュールとして記述して、import キーワードを使用してページの JS に追加できるようにしています。

カルーセルには互いに重なって配置されるスライドがあるため、JS 内で計算が行われ、最も高いカルーセル スライドの高さが決定され、この高さがカルーセルの UL 要素に適用されます。

このモジュールは、すべてのカルーセル要素の含まれる DIV、カルーセル スライドの UL など、コンストラクター内の DOM からいくつかの要素を取得します。

class Carousel {
    // set up instance variables
    constructor (options) {

        this.element = options.element;
        this.carousel = options.element.querySelectorAll('ul');
        this.carouselSlides = this.carousel[0].children;
        this.carouselHeight = 0;
    }

    resize () {
        console.log(this.carouselSlides);

        //Get tallest slide
        Array.prototype.map.call( this.carouselSlides, ( slide ) => {
            this.carouselHeight = (slide.offsetHeight > this.carouselHeight) ? slide.offsetHeight : this.carouselHeight;
        });

        //Set the height of the carousel to the height of its tallest slide
        this.carousel[0].style.height = this.carouselHeight+'px';

    }

    // initial set up
    setup () {
        this.resize();
        window.onresize = this.resize;
    }



}


module.exports = Carousel;

この高さはブラウザの幅が小さくなるにつれて調整する必要があるため、window.onresize でこの計算を行う関数を呼び出そうとしました。

ただし、これは機能しません。コンストラクターで変数に割り当てられた dom ノードが現在の幅と高さでキャッシュされているため、サイズ変更関数が新しい値を計算に使用しないためだと思います。

このキャッシュの問題を防ぐためにコードを調整するにはどうすればよいですか?

以下は、これまでのコードの単純化された Codepen です。(Codepen のためだけにメイン スクリプトに Carousel モジュール コードを追加する必要がありました):

http://codepen.io/decodedcreative/pen/vXzGpE/

ありがとう

4

2 に答える 2

0

私のコードにはいくつかの問題があったことがわかりました。Ori Drori の助けのおかげで、私は彼らの真相にたどり着きました。固定コードは次のとおりです。

class Carousel {
    // set up instance variables
    constructor (options) {

        this.element = options.element;
        this.carousel = options.element.querySelectorAll('ul');
        this.carouselSlides = this.carousel[0].children;
        this.carouselHeight = 0;

    }

    resize () {

        //Get tallest slide
        Array.prototype.map.call( this.carouselSlides, ( slide ) => {
            this.carouselHeight = (slide.offsetHeight > this.carouselHeight) ? slide.offsetHeight : this.carouselHeight;
        });

        //Set the height of the carousel to the height of its tallest slide
        this.carousel[0].style.height = this.carouselHeight+'px';

        //Reset the height of the carousel to zero
        this.carouselHeight = 0;

     }

     // initial set up
     setup () {
         this.resize();
         window.addEventListener("resize", this.resize.bind(this));
     }



}

うまくいけば、これは誰かを助けます！

于 2016-10-16T16:52:10.700 に答える