Question

给定多个div，每个div的数据属性为data-episode-count=，每个div都有一个基于每个容器中的剧集数量的值。如果当前所选容器（具有display：block样式）中的剧集数小于6，我在使用类show-more隐藏div时遇到问题。我不知道如何检查数据-attribute value，如果小于6，则为show-more按钮将div样式显示设置为none。 series-seasons-list-wrap课程有多个季节，但为了这个问题，我已将其简化为一个季节。

HTML

<div class="series-seasons-list-wrap">
  <div class="js-season-list-item" id="season-1" style="display: block;">
    <div class="season-list" data-episode-count="22">
      <div class="season-list__item">
        <div class="episode-item">
          <div class="episode-card js-episode-card">
            <div class="episode-card__overlay"><a href="/play/2603399"><span class="play-circle sm" data-play-path="/play/2603399"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
          </div>
          <div class="episode-details">
            <h1 class="heading md hvy">Trick or Treat</h1>
            <p></p>
            <p class="runtime">22min</p>
          </div>
        </div>
      </div>
      <div class="season-list__item">
        <div class="episode-item">
          <div class="episode-card js-episode-card">
            <div class="episode-card__overlay"><a href="/play/2603400"><span class="play-circle sm" data-play-path="/play/2603400"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
          </div>
          <div class="episode-details">
            <h1 class="heading md hvy">The New Man</h1>
            <p></p>
            <p class="runtime">22min</p>
          </div>
        </div>
      </div>
      <div class="season-list__item">
        <div class="episode-item">
          <div class="episode-card js-episode-card">
            <div class="episode-card__overlay"><a href="/play/2603401"><span class="play-circle sm" data-play-path="/play/2603401"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
          </div>
          <div class="episode-details">
            <h1 class="heading md hvy">I'll Give You A Million</h1>
            <p></p>
            <p class="runtime">22min</p>
          </div>
        </div>
      </div>
      <div class="season-list__item">
        <div class="episode-item">
          <div class="episode-card js-episode-card">
            <div class="episode-card__overlay"><a href="/play/2603402"><span class="play-circle sm" data-play-path="/play/2603402"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
          </div>
          <div class="episode-details">
            <h1 class="heading md hvy">Painkiller</h1>
            <p></p>
            <p class="runtime">22min</p>
          </div>
        </div>
      </div>
      <div class="season-list__item">
        <div class="episode-item">
          <div class="episode-card js-episode-card">
            <div class="episode-card__overlay"><a href="/play/2603403"><span class="play-circle sm" data-play-path="/play/2603403"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
          </div>
          <div class="episode-details">
            <h1 class="heading md hvy">The Odds</h1>
            <p></p>
            <p class="runtime">22min</p>
          </div>
        </div>
      </div>
      <div class="season-list__item">
        <div class="episode-item">
          <div class="episode-card js-episode-card">
            <div class="episode-card__overlay"><a href="/play/2603404"><span class="play-circle sm" data-play-path="/play/2603404"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
          </div>
          <div class="episode-details">
            <h1 class="heading md hvy">Mookie and Pookie</h1>
            <p></p>
            <p class="runtime">22min</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="show-more"><span class="js-show-more-trigger">Show 
More</span></div>

javascript：

const SeriesDetail = {
  seasonItems: undefined,
  keyContainer: undefined,
  keyItems: undefined,
  showMoreTrigger: undefined,
  activeSeason: undefined,

  bindEvents () {
    this.keyContainer.addEventListener('click', (e) => {
      const target = e.target
      const number = (target.dataset && target.dataset.seasonNum) || 1
      this.setSeason(number)
      this.setHistory(number)
      this.toggleShowMore()
    })

    this.showMoreTrigger.addEventListener('click', (e) => {
      this.showMore()
    })
  },

  init () {
    this.showMoreTrigger = document.getElementsByClassName('js-show-more-trigger')[0]

    this.keyContainer = document.getElementsByClassName('js-season-key-items')[0]

    const keyItems = this.keyContainer.querySelectorAll('.js-season-key')
    this.keyItems = [...keyItems]

    const seasonItems = document.getElementsByClassName('js-season-list-item')
    this.seasonItems = [...seasonItems]

    const seasonNum = this.getQuery('season') || 1

    this.setSeason(seasonNum)
    this.bindEvents()

    return this
  },

  setSeason (number) {
    this.activeSeason = number
    this.seasonItems.map(s => {
      s.style.display = s.id === `season-${number}`
        ? 'block'
        : 'none'
    })

    this.keyItems.map(i => {
      if (i.id === `season-key-${number}`) {
        i.classList.add('active')
      } else {
        i.classList.remove('active')
      }
    })
  },

  showMore () {
    let seasons = document.getElementsByClassName('js-season-list-more')
    seasons = [...seasons]
    let season = seasons.find(s => {
      const number = s.dataset.seasonNumber
      return this.activeSeason === number
    })
    if (season) {
      season.style.display = season.style.display === 'flex' ? 'none' : 'flex'
    }
  },

  toggleShowMore() {
    let showMore = document.getElementsByClassName("show-more")[0];
    let seasonList = document.getElementsByClassName("season-list")
    let episodeCount = [].slice.call( seasonList ).reduce((acc,val) => {
      return acc + Number(val.getAttribute("data-episode-count")) }, 0)
    for(let i = 0; i < document.getElementsByClassName("series-seasons-list-wrap").length; i++){
      if(seasonList.getAttribute("data-episode-count") < 6){
          showMore.style.display = 'none'
      }
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  SeriesDetail.init()
})

Codepen：https://codepen.io/testermytesty/pen/wmdGZE?editors=1010

Answer 1

您遇到的问题在于您的Javascript。在该行：

let episodeCount = seasonList.getAttribute("data-episode-count");

seasonList是一个HTMLCollection。如果您只有一个并且想要获得所需的属性，则应该执行以下操作：

let episodeCount = seasonList[0].getAttribute("data-episode-count");

如果它是seasonList Collection中的多个元素，那么您可以使用：

let episodeCount = [].slice.call(seasonList).reduce((acc,val) => {
    return acc + Number(val.getAttribute("data-episode-count")) 
}, 0)

仅在数据属性小于某个数字时显示div

1 个答案: