1

Есть код

let ending = '';

if ((data.result.countrecords % 100 > 10) && (data.result.countrecords % 100 < 20)) {
  ending = 'ов';
} else {
  switch (data.result.countrecords % 10) {
    case 0:
    case 5:
    case 6:
    case 7:
    case 8:
    case 9:
      ending = 'ов';
      break;
    case 1:
      ending = '';
      break;
    case 2:
    case 3:
    case 4:
      ending = 'а';
      break;
  }
}
let centeroutput = '<div id=\"topcenterarea\">' + '<h1>' + data.result.header + ' ' + '<span id=\"goodscount\">' + data.result.countrecords + ' товар' + ending + '</span>' + '</h1>' + '</div>';
console.log(centeroutput);

let productcardsoutput = '';

for (let i = 0; i < data.result.countrecords; i++) {
  let productcardobject = {};
  productcardobject["imagepath"] = data.output[i]['imagepath'];
  console.log('Путь к рисунку ' + productcardobject["imagepath"]);
  productcardobject["monoblockname"] = data.output[i]['monoblockname'];
  productcardobject["color"] = data.output[i]['color'];
  productcardobject["Диагональ"] = data.output[i]['screendiagonal'];
  productcardobject["разрешение"] = data.output[i]['resolution'];
  productcardobject["Тип процессора"] = data.output[i]['cputype'];
  productcardobject["Частота процессора"] = data.output[i]['frequency'];
  productcardobject["Оперативная память (RAM)"] = data.output[i]['ramsize'];
  productcardobject["Графический контроллер"] = data.output[i]['videocard'];
  if (data.output[i]['memorytype'] == 'SSD') {
    productcardobject["Объем SSD"] = data.output[i]['sizememorydata'];
    checkMemory = 'SSD';
  } else if (data.output[i]['memorytype'] == 'HDD') {
    productcardobject["Объем HDD"] = data.output[i]['sizememorydata'];
    checkMemory = 'HDD';
  };
  productcardobject["GoodsPrice"] = data.output[i]['price'];
  productcarditems[i] = productcardobject;
  console.log('productcarditems[i]');
  console.log(productcarditems[i]);
  /*
  console.log('After productcarditems[i]');
  console.log(productcardobject);
  */
}
console.log('productcarditems output');
console.log(productcarditems);


let pagination = document.querySelector('#pagination');

let notesOnPage = 15;
let countOfItems = Math.ceil(productcarditems.length / notesOnPage);
console.log(countOfItems);
let showPage = (function() {
  let active;
  console.log('Inside showPage');
  return function(item) {
    if (active) {
      active.classList.remove('active');
    }
    active = item;

    item.classList.add('active');

    let pageNum = +item.innerHTML;

    let start = (pageNum - 1) * notesOnPage;
    console.log(start);
    let end;
    if (productcarditems.length - start >= notesOnPage) {
      end = start + notesOnPage;
    } else {
      end = productcarditems.length;
    }
    console.log(end);

    let notes = productcarditems.slice(start, end);
    console.log(notes);
    $('.centerarea').innerHTML = '';
    let k = 0;
    for (let note of notes) {
      console.log(note['monoblockname']);
      RenderProductCard(note, k);
      console.log('Render note');
      console.log(note);
      console.log('Before centeroutput');
      centeroutput += productcardsoutput;
      //console.log(centeroutput);
      k += 1;
      console.log('k=' + String(k));
    }
    $('.centerarea').html(centeroutput);
  };
}());

let items = [];
for (let j = 1; j <= countOfItems; j++) {
  let li = document.createElement('li');
  li.innerHTML = j;
  pagination.appendChild(li);
  items.push(li);
}

showPage(items[0]);

for (let item of items) {
  item.addEventListener('click', function() {
    showPage(this);
  });
}

function RenderProductCard(productcardobj, i) {
  console.log('Inside render');
  productcard = '<div class="ProductCardBlock" id=\"ProductCardBlock' + String(i) + '\">';
  productcard += '<div class="dynamic ProductImage">';
  productcard += '<div id="ImageWrapper">';
  productcard += '<img class="ProductPicture" src=' + '"../images/' + productcardobj['imagepath'] + '">';
  productcard += '</div>';
  productcard += '</div>';
  productcard += '<div class="dynamic ProductDescription">';
  productcard += '<div class="ProductName">' + productcardobj['monoblockname'] + ', ' + productcardobj['color'] + '</div>';

  productcard += '<div class="ProductScreenParamsWrapper">' + '<span class="text">' + 'Диагональ/разрешение ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductScreenParams">' + ' ' + productcardobj["Диагональ"] + '/' + productcardobj["разрешение"] + 'пикс.' + '</span>' + '</div>';
  productcard += '<div class="ProductCpuTypeWrapper">' + '<span class="text">' + 'Тип процессора ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductCpuType">' + ' ' + productcardobj["Тип процессора"] + '</span>' + '</div>';
  productcard += '<div class="ProductCpuFrequencyWrapper">' + '<span class="text">' + 'Частота процессора ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductCpuFrequency">' + ' ' + productcardobj["Частота процессора"] + '</span>' + '</div>';
  productcard += '<div class="ProductRAMWrapper">' + '<span class="text">' + 'Оперативная память (RAM) ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductRAM">' + ' ' + productcardobj["Оперативная память (RAM)"] + '</span>' + '</div>';
  productcard += '<div class="ProductVideoCardWrapper">' + '<span class="text">' + 'Графический контроллер ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductVideoCard">' + ' ' + productcardobj["Графический контроллер"] + '</span>' + '</div>';

  if (checkMemory == 'SSD') {
    productcard += '<div class="ProductDisksAndDrivesWrapper">' + '<span class="text">' + 'Объем SSD ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductDisksAndDrives">' + ' ' +
      productcardobj["Объем SSD"] + '</span>' + '</div>';
  } else if (checkMemory == 'HDD') {
    productcard += '<div class="ProductDisksAndDrivesWrapper">' + '<span class="text">' + 'Объем HDD ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductDisksAndDrives">' + ' ' + productcardobj["Объем HDD"] + '</span>' + '</div>';
  };

  productcard += '</div>';
  productcard += '<div class="dynamic ProductBuyPart">' + '<div class="GoodsPrice">' +
    productcardobj["GoodsPrice"] + ' ' + '&#8381' + '</div>' + '<button type="submit" class="ProductAddToBasket" value="В корзину">Купить</button>' + '</div>';

  productcard += '</div>';
  productcardsoutput += productcard;

}

/*
console.log('Before centeroutput');
centeroutput+=productcardsoutput;
centeroutput+='<ul id="pagination"></ul>';
console.log(centeroutput);
$('.centerarea').html(centeroutput);
*/



}
}
)
}
)
/*);*/

Он читает из базы данных (data.output[i]) и записывает в массив productcarditems объекты productcardobject (карточки товаров) (в остальном пример похож как на http://code.mu/ru/javascript/video/lesson/implementation-of-pagination-in-javascript/). При щелчке на кнопке пагинации (№2) вместо очищения экрана

    $('.centerarea').innerHTML='';

на экран выводятся нестертые 15 элементов и еще 2 элемента (должно вывести просто 2 элемента). Почему не срабатывает очищение блока с классом .centerarea.

1 ответ 1

1

У объекта jQuery нет свойства innerHTML.

$('.centerarea').html('');
5
  • Исправил, не помогло. 15 сен 2021 в 15:57
  • @krasnodarprogrammer Неправильно исправили.
    – user176262
    15 сен 2021 в 15:58
  • вы поняли суть вопроса. Мне нужно дополнить вопрос? Кажется причина не в $('.centerarea').html 15 сен 2021 в 16:00
  • @krasnodarprogrammer Нажмите на кнопку "Выполнить код" в вопросе.
    – user176262
    15 сен 2021 в 16:03
  • все нашел решение. Проблема в том, что перед использованием переменной centeroutput ее необходимо обнулять. 15 сен 2021 в 16:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.