Question

鉴于数据属性为season-list的类data-episode-count，我有一个脚本将循环遍历所有season-list类并获取data-episode-count值的值。但是，它当前仅返回小于6的数据属性的值。如果js-show-more-trigger类在season-list中发烧超过6，则需要能够隐藏data-episode-count类值。如果trigger.style.display = "none";值小于6，则使用data-episode-count应隐藏触发器类，但我收到错误Cannot set property 'display' of undefined

let trigger = document.getElementsByClassName('js-show-more-trigger');
let seasonList = document.getElementsByClassName("season-list")
for (let i = 0; i < seasonList.length; i++) {
  if (seasonList[i].getAttribute('data-episode-count') < 6) {
    trigger.style.display = "none";
  }
}

.season-list {
  display: flex;
}

<div class="js-season-list-item" id="season-5" style="display: block;">
  <div class="season-list" data-episode-count="3">
    <div class="season-list__item">
      <div class="episode-item">
        <div class="episode-card js-episode-card">
          <div class="episode-card__overlay"><a href="/play/3099013"><span class="play-circle sm" data-play-path="/play/3099013"><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">Episode 1</h1>
          <p></p>
          <p class="runtime">21min</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/3099014"><span class="play-circle sm" data-play-path="/play/3099014"><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">Episode 2</h1>
          <p></p>
          <p class="runtime">21min</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/3099015"><span class="play-circle sm" data-play-path="/play/3099015"><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">Episode 3</h1>
          <p></p>
          <p class="runtime">21min</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="show-more"><span class="js-show-more-trigger">Show 
More</span></div>

Codepen： LINK

Answer 1

您要将display属性设置为数组trigger而不是其包含的元素，这就是为什么它会显示Cannot set property 'display' of undefined。

您需要将trigger.style.display = "none";替换为trigger[i].style.display = "none";以分别定位每个触发器。

Answer 2

const trigger = document.querySelector('.js-show-more-trigger');
const seasonLists = document.querySelectorAll('.season-list');
seasonLists.forEach(seasonList => {
  if (Number(seasonList.getAttribute('data-episode-count') < 6)) trigger.style.display = "none";
});

您的初始trigger是HTMLCollection，而不是元素 - 在选择单个元素时使用querySelector，并且在您想要迭代时通常使用NodeLists（qSA）。 getElementsBy *方法返回HTMLCollections，这可能很难处理。请考虑使用querySelectorAll，它返回一个静态NodeList - 与HTMLCollection不同，它可以直接迭代，在迭代时不会改变，而且它更灵活。

使用基于当前所选类的数据属性的JavaScript隐藏div

2 个答案: