Отображение отфильтрованных результатов с помощью кнопки «Показать больше» (Vanilla JS & InnerHTML) - PullRequest
Новая
       20

Отображение отфильтрованных результатов с помощью кнопки «Показать больше» (Vanilla JS & InnerHTML)

0 голосов
/ 29 марта 2019

У меня есть скрипт, который подсчитывает количество казино, показанных на странице через innerHTML и предопределяет, сколько их показывать за один раз (allowToShow)

При нажатии на фильтр он добавляет казино из массива казино finalResult

Когда я нажимаю SHow More, она перезапускает функцию, которая добавляет X количество казино (а также вычитает их из списка доступных казино)

Чтобы остановить список, отображающий слишком много казино, для которых у меня естьцикл, который возвращает, если он повторяет больше, чем разрешено. Количество казино.Также у меня есть проверка, чтобы убедиться, что casinosShown меньше, чем разрешено казино

ПРОБЛЕМА: Когда я нажимаю фильтр 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.

...