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

yftpprvb  于 2022-11-27  发布在  Java
关注(0)|答案(1)|浏览(108)

我的代码是根据特定的条件显示鞋子,并且从显示的产品中总是有最适合的鞋子。在每个显示的产品下都有一个<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是不可迭代的。这个错误显示在控制台上。我希望代码能够根据条件删除隐藏类。

yc0p9oo0

yc0p9oo01#

我假设每一项都包含在.item-container中,然后对每一项应用条件,如果匹配,则获取 its 相关的.best-fit元素。
第一个

相关问题