在 JavaScript/Flickity 时间线轮播上的导航按钮/链接上设置选定的类

问题描述

我正在使用 Flickity 为我客户的网站构建历史时间线轮播。我在 CodePen 上构建了一个简化的演示，展示了它目前的工作方式以及需要调整的内容。

CodePen demo

演示改编自此CodePen

需要调整的区域是按钮和用户点击或点击时添加的 is-selected 类。

以下 JS 包含来自笔演示的代码。有问题的代码被注释掉。如果我启用代码，CodePen 会显示以下错误 TypeError: prevIoUsSelectedButton is null

作为参考，完成和工作历史时间线轮播的 HTML 模板将是：

<div class="carousel">
  <div class="carousel__timeline">
      <ul class="timeline__nav">
        <li class="timeline__item" data-year="1984" >
            <a href="#" id="1984" class="button button--year js-btn--year" data-group=".groupone"><span>1984 to 1988</span></a>
        </li>
        <li class="timeline__item" data-year="1989" >
            <a href="#" id="1989" class="button button--year js-btn--year" data-group=".grouptwo">1989 to 1992</a>
        </li>
        <li class="timeline__item" data-year="1993">
            <a href="#" id="1993" class="button button--year js-btn--year" data-group=".groupthree">1993 to 1999</a>
        </li>
        <li class="timeline__item" data-year="2000">
            <a href="#" id="2000" class="button button--year js-btn--year" data-group=".groupfour">2000 to 2002</a>
        </li>
        <li class="timeline__item" data-year="2003">
            <a href="#" id="2003" class="button button--year js-btn--year" data-group=".groupfive">2003 to 2005</a>
        </li>
        <li class="timeline__item" data-year="2006">
            <a href="#" id="2006" class="button button--year js-btn--year" data-group=".groupsix">2006 to 2012</a>
        </li>
        <li class="timeline__item" data-year="2013">
            <a href="#" id="2013" class="button button--year js-btn--year" data-group=".groupseven">2013 to 2020</a>
        </li>
      </ul>
  </div>
  <div class="carousel__content">
    {articles category="History" ordering="publish_up ASC" fixhtml="false"}
    <article class="carousel__cell [year-group]">
      [text]
              [year-group]
    </article>
    {/articles}
  </div>
  <div class="carousel__nav">
    <button class="button button--prevIoUs js-btn--prevIoUs">
        <svg width="18" height="18"><path d="M10.347 1.175L9.455.283a.96.96 0 0 0-1.362 0L.283 8.09a.96.96 0 0 0 0 1.362l7.81 7.81a.96.96 0 0 0 1.362 0l.892-.892a.965.965 0 0 0-.016-1.378L5.49 10.379h11.546c.534 0 .964-.43.964-.964V8.129a.962.962 0 0 0-.964-.964H5.49l4.84-4.612a.958.958 0 0 0 .017-1.378z" fill="#F7F7F7"/></svg>
    </button>
    <button class="button button--next js-btn--next">
        <svg width="18" height="18"><path d="M7.653 1.175l.892-.892a.96.96 0 0 1 1.362 0l7.81 7.806a.96.96 0 0 1 0 1.362l-7.81 7.81a.96.96 0 0 1-1.362 0l-.892-.892a.965.965 0 0 1 .016-1.378l4.841-4.612H.964A.962.962 0 0 1 0 9.415V8.129c0-.534.43-.964.964-.964H12.51L7.67 2.553a.958.958 0 0 1-.017-1.378z" fill="#F7F7F7"/></svg>
    </button>
  </div>
</div>

此代码正在开发网站上运行，并在尝试将 is-selected 类应用于导航链接时出现相同的错误。

JavaScript 代码

const utils = window.fizzyUIUtils;

const flkty = new Flickity(".carousel",{
  cellAlign: "left",contain: true,prevNextButtons: false,pageDots: false
});

const carouselButtonGroup = document.querySelector(".carousel__buttons");
const carouselButtons = utils.makeArray(carouselButtonGroup.children);

// update buttons on select
// flkty.on( 'select',function() {
//   const prevIoUsSelectedButton = carouselButtonGroup.querySelector('.is-selected');
//   const selectedButton = carouselButtonGroup.children[ flkty.selectedindex ];
//   prevIoUsSelectedButton.classList.remove('is-selected');
//   selectedButton.classList.add('is-selected');
// });

carouselButtonGroup.addEventListener("click",function (event) {
  // Filter for button clicks
  if (!matchesSelector(event.target,".button")) {
    return;
  }
  const selector = event.target.getAttribute("data-selector");
  // const index = carouselButtons.indexOf( event.target );
  // flkty.select( index );
  flkty.selectCell(selector);
});

解决方法

您的问题是您的 DOM 中没有默认的 .carousel__buttons button.is-selected。所以在第一次调用时，carouselButtonGroup.querySelector('.is-selected') 将返回 null，因为还没有这样的元素。您可以通过为 is-selected 的第一个按钮提供类 .carousel__buttons 来轻松解决此问题：

<div class="carousel__buttons">
  <button class="button is-selected" data-selector=".groupone">
    1984 to 1988
  </button>
  <button class="button" data-selector=".grouptwo">1989-1992</button>
  <button class="button" data-selector=".groupthree">1993-1999</button>
  <button class="button" data-selector=".groupfour">2000-2002</button>
  <button class="button" data-selector=".groupfive">2003-2005</button>
  <button class="button" data-selector=".groupsix">2006-2012</button>
  <button class="button" data-selector=".groupseven">2013-2020</button>
</div>

查看Codepen。

,

我在您的 Codepen 上看到它仍然损坏，因为您的 HTML 中有重复的 DIV 类：

<div class="carousel">
  <div class="carousel-cell groupone">
    <p>1984-1988</p>
    <p>Medicine River Wildlife ...</p>
  </div>
  <div class="carousel-cell groupone">
    <p>1984-1988</p>
    <p>Wildlife Rehabilitation was ...</p>
  </div>
  <div class="carousel-cell grouptwo">
    ...

要使 flickity 正常工作，每个 div 都需要有一个唯一的类名：

<div class="carousel">
  <div class="carousel-cell groupone">
    <p>1984-1988</p>
    <p>Medicine River Wildlife ...</p>
  </div>
  <div class="carousel-cell grouptwo">
    <p>1984-1988</p>
    <p>Wildlife Rehabilitation was ...</p>
  </div>
  <div class="carousel-cell groupthree">

等等...