无法从子元素中删除隐藏类

Question

我的代码是根据一定的条件来显示鞋子，而且从展示的产品中总是有最合适的鞋子。每个显示的产品下面都有一个<div class="best-tag hidden">Best Fit</div>元素。我想要做的是，如果显示的产品有best-fit类，那么代码应该从上面提到的div中删除hidden类。有人能帮上忙吗？

我目前编写的代码是：

  const hiddenBesttag = document.getElementsByClassName('item-container')
  const hiddenPurple = document.getElementsByClassName('best-tag')
  for(const child of hiddenBesttag.children) {
    if (child.classList.contains('best-fit')) {
        console.log('has best-fit')
        hiddenPurple.classList.remove('hidden')
    }
  }

HTML部分如下：

 <div class="item-container" data-min="{{ minsec }}" data-max="{{ maxsec }}">
   <div class="best-tag hidden">Best Fit</div>
   <a href="{{ product.url }}">
     <div class="image-container">
       <img src="{{ product.featured_image | image_url }}">
     </div>
     <div class="detail-container">
       <div class="title">{{ product.title }}</div>
       <div class="min-minute"> {% assign min_minutes =  minsec | divided_by: 60.00 | floor  %} {% assign min_minutes_seconds =  min_minutes | times: 60.00 | round  %} <span>{{ min_minutes }}:{{ minsec | minus: min_minutes_seconds | round }}</span> - {% assign max_minutes =  maxsec | divided_by: 60.00 | floor  %} {% assign max_minutes_seconds =  max_minutes | times: 60.00 | round  %}<span>{{ max_minutes }}:{{ maxsec | minus: max_minutes_seconds | round }}</span>
       </div>
     </div>
     <div class="minskm-text">
       <span>MINS PER KM</span>
     </div>
   </a>
 </div>

整个守则如下：

<script>
  $(".product-container").slick({
    dots: false,
    infinite: false,
    nav:false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 1
});

const allProducts = document.querySelectorAll(`.product-container .slick-track [data-min]`)
document.querySelector(`#range2`).addEventListener("change", slowHideProduct);

  function range(start, end, step = 1) {
    const len = Math.floor((end - start) / step) + 1
    return Array(len).fill().map((_, idx) => start + (idx * step))
  }
  
  function intersect(a, b) {
    return a.filter(Set.prototype.has, new Set(b));
  }

  
  function slowHideProduct(e){
    let selectedElements = [];
    let sliderInterval = [];
    let productTimeframe = [];
    let bestfitlist = [];
    const currentVal = parseInt(e.target.value);
    console.log(currentVal)
    for(let elem of allProducts) {
        const minsec = parseFloat(elem.dataset.min || 0);
        const maxsec = parseFloat(elem.dataset.max || 0);
        console.log("min sec" , minsec)
        console.log("max sec", maxsec)


        let sliderInterval = [...range(currentVal - 30,currentVal + 30,5)];
        console.log(sliderInterval);
        
        let productTimeframe = [...range(minsec,maxsec,5)];
        console.log(productTimeframe);
        
        let intersectionOfTime = intersect(sliderInterval,productTimeframe);
        console.log(intersectionOfTime);

        

          
      
        if(intersectionOfTime.length > 0) {
            selectedElements.push(elem);
            bestfitlist.push(intersectionOfTime.length);
        } else if(selectedElements.length == 0 && maxsec < Math.max(...sliderInterval)){
          selectedElements.push(elem);
        } else {
          sliderInterval = [];
          productTimeframe = [];
        }

        console.log("selectedElements",selectedElements)
        $(".product-container").slick('slickUnfilter');
        const allSliders = document.querySelectorAll(`.item-container `);
        for(let elem of allSliders) {
          elem.classList.remove("best-fit");
        }
        $(".product-container").slick('slickFilter',selectedElements)
    }
    console.log("bestfitlist",bestfitlist)
    const bestFitDisplay = bestfitlist.indexOf(Math.max(...bestfitlist))
    console.log("bestFitDisplay" , bestFitDisplay)
    document.querySelectorAll(`.item-container`)[bestFitDisplay].classList.add('best-fit');

  const hiddenBesttag = document.getElementsByClassName('item-container')
  const hiddenPurple = document.getElementsByClassName('best-tag')
  for(const child of hiddenBesttag.children) {
    if (child.classList.contains('best-fit')) {
        console.log('has best-fit')
        hiddenPurple.classList.remove('hidden')
    }
  }
}

document.querySelector(`#range2`).dispatchEvent(new Event("change"));


</script>

我只是不明白为什么hiddenBesttag.children是不可迭代的。此错误正在控制台中显示。我希望代码能够根据条件执行隐藏类删除。

Answer 1

我假设每个项目都包含在.item-container中。然后，要将条件应用于每个项，如果匹配，则获取其相关的.best-fit元素。这里的诀窍是使用Element.querySelectorAll

​

const items = document.querySelectorAll('.item-container')
items.forEach(function(item) {
  // I think you meant:
  if (item.classList.contains("best-fit")) {
    item.querySelector(".best-tag").classList.remove("hidden");
  }
})

<div class="item-container" data-min="{{ minsec }}" data-max="{{ maxsec }}">
  <div class="best-tag hidden">Best Fit</div>
  <a href="{{ product.url }}">
    <div class="image-container">
      <img src="{{ product.featured_image | image_url }}">
    </div>
    <div class="detail-container">
      <div class="title">{{ product.title }}</div>
    </div>
    <div class="minskm-text">
      <span>MINS PER KM</span>
    </div>
  </a>
</div>

​