Question

我有一些类js-season-list-item的div，每个div的内联样式为style="display: none;"或style="display: block;"。它们包含在series-seasons-list-wrap的父类中。我需要能够遍历父类，并找到当前设置为js-season-list-item的内联样式的style="display: block;"。如果是，我需要能够检查data-episode-count值，如果它小于6，我需要它将show-more类的显示设置为无。基本上，当用户在不同的季节视图之间切换时，如果当前可见的（设置为显示：块）可见，则脚本应检查data-episode-count的值。如果该值小于6，则“show more”按钮应设置为none。当用户在系列之间切换时会触发此操作。

HTML

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

<div class="series-seasons-list-wrap">
<div class="js-season-list-item" id="season-5" style="display: none;">
  <div class="season-list" data-episode-count="7">
    <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="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>
  
<div class="show-more"><span class="js-show-more-trigger">Show 
More</span></div>

Codepen：link

Answer 1

您在循环中的seasonList上使用了错误的索引，j不是i。

您将string值与number值进行比较（不是世界末日，但最好确保它是数字值）。

最后，您使用trigger获取div getElementsByClassName，这会返回array。你只有这些div中的一个，所以你不能在循环中使用当前索引来访问数组（只有[0]）。

最好使用id和getElementById。

如果您在页面上有多个这些，那么它们应该在每个季节（不在外面）中包含，然后使用正确的索引器来检索它。

我已将其移入包装中，因为我认为这就是您想要的。

这是工作代码（供应的内容）：

＆＃13;

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

＆＃13;

<div class="series-seasons-list-wrap">
    <div class="js-season-list-item" id="season-5" style="display: none;">
        <div class="season-list" data-episode-count="7">
            <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="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>
</div>

＆＃13;

根据父

1 个答案: