0

我目前正在学习 ES6。我正在尝试创建一个轮播，我通常会将其编写为 JQuery 插件，但现在将其编写为 ES6 模块，以便可以使用 import 关键字将其添加到页面的 JS 中。

由于轮播具有绝对相互重叠的幻灯片，因此在 JS 中进行计算以确定最高的轮播幻灯片高度，然后将此高度应用于轮播的 UL 元素。

该模块从构造函数中的 DOM 中抓取几个元素，例如所有轮播元素的包含 DIV、轮播幻灯片的 UL 等。

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 节点被缓存在它们当前的宽度和高度，因此 resize 函数在计算中不使用它们的新值。

如何调整我的代码以防止出现此缓存问题？

到目前为止，下面是我的代码的简化 Codepen。（我必须在 Codepen 的主脚本中添加 Carousel 模块代码）：

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

谢谢

4

2 回答 2

1

您的问题与this. 当您将回调分配给window.resize事件时， this 更改为window：

window.onresize = this.resize;

调用回调时，this.carouselSlides未定义，因为窗口没有此属性（查看控制台以查看错误）。

为防止出现此问题，请将回调绑定到原始this（类实例）：

window.onresize = this.resize.bind(this);

你可以在这个codepen中看到它。

于 2016-10-16T13:21:29.630 回答
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 回答