Question

我有一个计算赌场数量的脚本，通过innerHTML在页面上显示并预先确定一次显示多少（allowedToShow）

点击过滤器后，它会从finalResult赌场数组中添加一个赌场

当我单击“更多”时，它将重新运行功能，以添加X数量的赌场（并从可用的赌场列表中减去它们）

为了停止显示太多赌场的列表，我有一个for循环，如果迭代次数超过允许的赌场数，则返回该循环。另外我有一张支票以确保CasinosShown小于允许的Casinos

问题：当我单击过滤器Div时，它会存储所有点击，直到我单击“显示更多”，此时，即使进行了安全检查，它也会在表中填充与过滤器Div一样多的点击。

filterDiv.addEventListener('click', (e) => {
  //reset html and past results
  theList.innerHTML="";
  finalResult=[];


  if (e.target.parentElement.getAttribute('data-filter-group') == 
'features') {
    featureColFilter = e.target.getAttribute('data-filter');
  } }



   let casinosShown = [];
   let allowedToShow = 1;

   console.log(casinosShown.length, '- shown After ReClick ', ' Allowed 
    to show= ', allowedToShow  );

   showBrandsOnce();

 function showBrandsOnce(){  
  casinosShown.push(document.getElementsByClassName("casino"));

    let i=0;

  if( casinosShown.length > allowedToShow  ){
    console.log('Too Many');
    return;
  }
  finalResult.forEach(brand => {
    if( casinosShown.length > allowedToShow  ){
    console.log('Too Many');
    return;
  }
  console.log(casinosShown.length, '- shown ', ' Allowed to show = ', 
    allowedToShow  );

    i++;
    if(i>1){
        return;
    }
    theList.innerHTML +=`
    <div class="casino" style="border:3px solid black;">
     ${brand.name}
    </div>
    `    
 });
}

const showMore = document.getElementById('showMore');

     showMore.addEventListener('click', (e) => {
       //count number of matches
       finalResult.splice(0,1);
       allowedToShow ++;
      //  console.log( ' matches Before show more',theList.innerHTML);

        showBrandsOnce();
      });

});

因此，它很好地展示了赌场，并且展示了更多作品。但是由于某种原因，每次我在过滤器按钮上单击另一个过滤器时，它都会运行该功能并向innerHTML添加另一个娱乐场。

使用“显示更多”按钮显示过滤结果（Vanilla JS和InnerHTML）

0 个答案: