My code is displaying shoes based on certain conditions and there's always a best fit shoe from the displayed products. There is a <div >Best Fit</div> element under each displayed product. What I want to do is if the displayed product has the best-fit class, then the code should remove the hidden class from the div mentioned above. Can somebody help out with this?

The code I currently wrote is:

  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')
    }
  }

The HTML part is the following:

 <div  data-min="{{ minsec }}" data-max="{{ maxsec }}">
   <div >Best Fit</div>
   <a href="{{ product.url }}">
     <div >
       <img src="{{ product.featured_image | image_url }}">
     </div>
     <div >
       <div >{{ product.title }}</div>
       <div > {% 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 >
       <span>MINS PER KM</span>
     </div>
   </a>
 </div>

The whole code is the following:

<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>

I just cannot figure out why the hiddenBesttag.children is not iterable. This error is displaying in the console. I want the code to be able to do the hidden class removal based on the conditions.

CodePudding user response：

I assume each item is contained within .item-container. Then you want to apply the condition to each item and if matches then get its relevant .best-fit element. The trick here is to use 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  data-min="{{ minsec }}" data-max="{{ maxsec }}">
  <div >Best Fit</div>
  <a href="{{ product.url }}">
    <div >
      <img src="{{ product.featured_image | image_url }}">
    </div>
    <div >
      <div >{{ product.title }}</div>
    </div>
    <div >
      <span>MINS PER KM</span>
    </div>
  </a>
</div>