简单的 if then 语句在 js 中不起作用

Question

我正在努力更新 AEM 中轮播组件的 JS。您可以使用名为 PerView 的菜单将其设置为一次显示多个项目。还有一个名为“peek”的值，它将在轮播中的边缘显示更多图像（取决于该值）......我的新代码行应该这样做： 如果 perview 大于 1，并且断点为 575，则将 perview 设置回 1 并将 peek 设置为 100。

目前，什么都没有发生，我需要一些帮助。我用 //*** 包围了我写的内容

import AEM from 'base/js/aem';
import Glide, { Controls, Breakpoints, Autoplay, Keyboard, Swipe } from '@glidejs/glide/dist/glide.modular.esm';

class Carousel extends AEM.Component {
    init() {
        this.initCarousel();
    }
    initCarousel() {
        const el = this.element;
        const props = this.props;


        const pauseButton = this.element.querySelector('.pause-button');
        let perView = parseInt(props.cmpPerView, 10);
        let cmpDelay = parseInt(props.cmpDelay, 10);
        let autoPlay = true;
        if (this.props.cmpAutoplay === 'false' ||
            this.props.carouselAutoplay === 'false' ||
            !Number.isNaN(perView) && perView < 1 ||
            window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            autoPlay = false;
        }
        // this.breakpoints = {};
        this.modules = {
            Controls: Controls,
            Autoplay: Autoplay,
            Keyboard: Keyboard,
            Swipe: Swipe
        };

// ****************************************************************************************
        // if perview is greater than 1, and breakpoint is 575, then set perview back to 1 and set peek to 100

        if (perView > 1) {
            this.breakpoints = {
                575: {
                    perView: 1,
                    peek: 100
                }
            };
        } else {
            this.breakpoints = {};
        }

//****************************************************************************************

        this.options = {
            type: props.cmpType,
            perView: Number.isNaN(perView) ? 1 : perView,
            autoplay: autoPlay ? cmpDelay : false,
            peek: 0,
            breakpoints: this.breakpoints,
            keyboard: true,
            animationDuration: 400,
            rewind: true
        };

        const glide = new Glide(el, this.options);
        if (pauseButton && autoPlay) {
            const pauseClasses = pauseButton.classList;
            glide.on('play', () => {
                pauseClasses.add('fa-pause');
                pauseClasses.remove('fa-play');
            });
            glide.on('pause', () => {
                pauseClasses.add('fa-play');
                pauseClasses.remove('fa-pause');
            });
            pauseButton.addEventListener('click', btn => {
                if (pauseClasses.contains('fa-play')) {
                    glide.play();
                } else {
                    glide.pause();
                }
            });
        } else if (pauseButton) {
            pauseButton.remove();
        }

        if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) {
            /*
             * Editor message handling:
             * - subscribe to "cmp.panelcontainer" message requests sent by the editor frame
             * - check that the message data panel container type is correct and that the id (path) matches this specific Carousel component
             * - if so, route the "navigate" operation to enact a navigation of the Carousel based on index data
             */
            this.element.querySelectorAll('.glide__slide').forEach(e => {
                if (!e.classList.contains('glide__slide--active')) {
                    e.classList.add('visually-hidden');
                }
            });
            window.CQ = window.CQ || {};
            window.CQ.CoreComponents = window.CQ.CoreComponents || {};
            window.CQ.CoreComponents.MESSAGE_CHANNEL = window.CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel('cqauthor', window);
            window.CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage('cmp.panelcontainer', message => {
                if (message.data && message.data.type === 'cmp-carousel' && message.data.id === el.dataset.cmpPanelcontainerId) {
                    if (message.data.operation === 'navigate') {
                        let index = message.data.index;
                        if (index < 0) {
                            return;
                        }

                        this.element.querySelectorAll('.glide__slide').forEach((el, i) => {
                            if (i === index) {
                                el.classList.add('glide__slide--active');
                                el.classList.remove('visually-hidden');
                            } else {
                                el.classList.remove('glide__slide--active');
                                el.classList.add('visually-hidden');
                            }
                        });
                    }
                }
            });
        } else {
            glide.mount(this.modules);
        }
    }
}

export { Carousel };

Answer 1

我感谢那些试图提供帮助的人，但归功于同事。

在顶部，我必须声明“断点”。

import Glide, { Controls, Breakpoints, Autoplay, Keyboard, Swipe } 
from '@glidejs/glide/dist/glide.modular.esm';

然后在模块中添加断点，我仍然习惯了 JS 作为可以引用模块的东西的想法

this.modules = {
        Controls: Controls,
        Breakpoints: Breakpoints, // added this
        Autoplay: Autoplay,
        Keyboard: Keyboard,
        Swipe: Swipe
    };

然后最后写出满足我需要的语句

this.options = {
        type: props.cmpType,
        perView: Number.isNaN(perView) ? 1 : perView,
        autoplay: autoPlay ? cmpDelay : false,
        peek: 0,
        keyboard: true,
        animationDuration: 400,
        rewind: true,
        breakpoints: {
            768: {
                perView: 3
            }
            578: {
                perView: 1,
                peek: 125
            }
        }
    };