Как убрать повторение в js коде?(картинка внутри)
Как убрать повторение, что бы было одно "Подробнее", и когда на него наводишь, показывалось правильное id, взятое из json файла(цифры из code)? Спасибо за помощь)
]1
Код HTML:
Электронные книги
<div class="text">
<div class="forImg"><img src="books/airbook_city_led.png" alt="Airbook City LED" title="Airbook City LED" /></div>
<h4 class="header"><a href="#">Электронная книга Airbook City LED</a></h4>
<p>АКЦИЯ!!! Карта памяти 4Gb в подарок. НAirBook City LED – многофункциональная доступная электронная книга с E-Ink экраном, встроенной подсветкой и поддержкой аудио. Простота управления, эргономичность и привлекательный дизайн корпуса позволяют получить максимальное удовольствие от чтения.</p>
<div class="code"> Код товара: 83751</div>
<div class="price">Цена: 2 999 грн.</div>
<div class="lka"></div>
<div class="promo"></div>
</div>
<div class="text">
<h4 class="header"><a href="#">Электронная книга PocketBook 614 Basic 3 White</a></h4>
<img src="books/PocketBook-614-basic-3-white.jpg" alt="PocketBook 614 Basic 3 White" title="PocketBook 614 Basic 3 White" />
<p>АКЦИЯ!!! Скидка 300грн. PocketBook 614 станет прекрасным подарком даже для тех, кто до сих пор считает, что бумажную книгу читать проще. Новый ридер содержит все необходимые функции для комфортного электронного чтения. </p>
<div class="code"> Код товара: 83750</div>
<div class="price">Цена: 2 499 грн.</div>
<div class="lka"></div>
</div>
JS код:
$.getJSON("books.json", function(data){
console.log(data);
let dataStr = '';
$.each(data, function (ind, item){
dataStr+=`<a href="http://site.com.ua/?id=${item.code}">Подробнее</a>`;
});
$('.lka').html(dataStr);
});
Json Файл
[
{
"name": "Airbook City LED",
"imageUrl": "books/airbook_city_led.png",
"description": "АКЦИЯ!!! Карта памяти 4Gb в подарок. НAirBook City LED – многофункциональная доступная электронная книга с E-Ink экраном, встроенной подсветкой и поддержкой аудио. Простота управления, эргономичность и привлекательный дизайн корпуса позволяют получить максимальное удовольствие от чтения.",
"code": 83751,
"price": 2999
}, {
"name": "PocketBook 614 Basic 3 White",
"imageUrl": "books/PocketBook-614-basic-3-white.jpg",
"description": "АКЦИЯ!!! Скидка 300грн. PocketBook 614 станет прекрасным подарком даже для тех, кто до сих пор считает, что бумажную книгу читать проще. Новый ридер содержит все необходимые функции для комфортного электронного чтения.",
"code": 83750,
"price": 2499
}, {
"name": "Evromedia E-Учебник One",
"imageUrl": "books/evromedia_one.jpg",
"description": "АКЦИЯ!!! Сертификат и фонарик в ПОДАРОК! Дисплей книги Evromedia E-Учебник One изготовлен на основе технологии «электронной бумаги» Е Ink Plus. Благодаря использованию технологии отраженного света чтение возможно даже в самый погожий день. Благодаря интуитивно понятному интерфейсу управлять процессом чтения легко и комфортно. 8 Гб встроенной памяти с возможностью расширения еще до 32 ГБ — это огромная библиотека, которая всегда под рукой!",
"code": 81890,
"price": 2199
}, {
"name": "Amazon Kindle Paperwhite 10th Gen 8GB",
"imageUrl": "books/Amazon-Kindle-paperwhite-10th-gen-8GB.jpg",
"description": "Это самый тонкий и самый легкий Kindle Paperwhite, с современным дизайном для комфортного чтения в течение многих часов. Он имеет плотность 300 ppi, дисплей Paperwhite, который выводит текст с качеством печатного текста и вдвое больше накопителя, чем в предыдущем поколении. Плюс заряд батареи держится неделями, а не часами.",
"code": 80673,
"price": 3249
}, {
"name": "Amazon Kindle All-new 10th Gen",
"imageUrl": "books/Amazon-Kindle-All-new-10th-Gen.jpg",
"description": "Управление читалкой кнопка-джойстик и боковые клавиши перелистывания. Сенсорный экран с подсветкой 6\".Память 4 Gb | Wi-Fi | Форматы книг: Kindle (AZW), TXT, PDF, unprotected MOBI, PRC natively, HTML, DOC, DOCX (требуется конвертация).",
"code": 83340,
"price": 2778
}, {
"name": "Onyx BOOX Cleopatra 3",
"imageUrl": "books/onyx-cleopatra.jpg",
"description": "АКЦИЯ!!! ОБЛОЖКА в ПОДАРОК! ONYX BOOX Cleopatra 3 — устройство для чтения электронных книг с экраном с увеличенной диагональю и сверхвысоким разрешением. Новейший экран E Ink Carta с диагональю 6,8 дюйма, подсветка MOON Light+ и поддержка функции SNOW Field - все это вы найдете в устройстве с 1 ГБ оперативной и 8 ГБ встроенной памяти. Есть модуль Wi-Fi и браузер для сёрфинга в сети Интернет. Электронная книга базируется на операционной системе Android 4.0.",
"code": 83737,
"price": 7535
}, {
"name": "PocketBook 632 Touch HD 3 Copper",
"imageUrl": "books/pocketbook-touch-hd-3.png",
"description": "АКЦИЯ!!! Скидка 50% на обложку! PocketBook 632 Touch HD3 обладает инфракрасным мультисенсорным экраном, светодиодной подсветкой, встроенным Wi-Fi модулем, 16 ГБ встроенной памяти, производительным процессором с тактовой частотой 1ГГц и 512 МБ оперативной памяти. Инфракрасный экран E Ink Carta с HD разрешением (1448х1072) и 300DPI, гарантирует высокую контрастность, четкость изображения и баланс между белым и черным цветами электронной страницы.",
"code": 96224,
"price": 5099
}
]
Ответы (3 шт):
Автор решения: Eugene X
→ Ссылка
$.each создаёт поиск ещё раз и ещё раз и ещё раз и ещё раз и ещё раз...
От туда и результат.
===Добавлено спустя===
Люблю jQuery - вообще неадекватная либа....
Автор решения: Алексей Шиманский
→ Ссылка
Вы в цикле вначале всё конкатенируете, а потом общую строку вставляете всем элементам, с одним классом. Правильнее наверное было НЕ конкатенировать, а добавлять строку только элементу по конкретному индексу. Типа такого:
$.each(data, function (index, item){
dataStr =`<a href="http://site.com.ua/?id=${item.code}">Подробнее</a>`;
$('.lka').eq(index).html(dataStr);
});
Автор решения: Виталий Шебаниц
→ Ссылка
let arr =[
{
"name": "Airbook City LED",
"imageUrl": "books/airbook_city_led.png",
"description": "АКЦИЯ!!! Карта памяти 4Gb в подарок. НAirBook City LED – многофункциональная доступная электронная книга с E-Ink экраном, встроенной подсветкой и поддержкой аудио. Простота управления, эргономичность и привлекательный дизайн корпуса позволяют получить максимальное удовольствие от чтения.",
"code": 83751,
"price": 2999
}, {
"name": "PocketBook 614 Basic 3 White",
"imageUrl": "books/PocketBook-614-basic-3-white.jpg",
"description": "АКЦИЯ!!! Скидка 300грн. PocketBook 614 станет прекрасным подарком даже для тех, кто до сих пор считает, что бумажную книгу читать проще. Новый ридер содержит все необходимые функции для комфортного электронного чтения.",
"code": 83750,
"price": 2499
}, {
"name": "Evromedia E-Учебник One",
"imageUrl": "books/evromedia_one.jpg",
"description": "АКЦИЯ!!! Сертификат и фонарик в ПОДАРОК! Дисплей книги Evromedia E-Учебник One изготовлен на основе технологии «электронной бумаги» Е Ink Plus. Благодаря использованию технологии отраженного света чтение возможно даже в самый погожий день. Благодаря интуитивно понятному интерфейсу управлять процессом чтения легко и комфортно. 8 Гб встроенной памяти с возможностью расширения еще до 32 ГБ — это огромная библиотека, которая всегда под рукой!",
"code": 81890,
"price": 2199
}, {
"name": "Amazon Kindle Paperwhite 10th Gen 8GB",
"imageUrl": "books/Amazon-Kindle-paperwhite-10th-gen-8GB.jpg",
"description": "Это самый тонкий и самый легкий Kindle Paperwhite, с современным дизайном для комфортного чтения в течение многих часов. Он имеет плотность 300 ppi, дисплей Paperwhite, который выводит текст с качеством печатного текста и вдвое больше накопителя, чем в предыдущем поколении. Плюс заряд батареи держится неделями, а не часами.",
"code": 80673,
"price": 3249
}, {
"name": "Amazon Kindle All-new 10th Gen",
"imageUrl": "books/Amazon-Kindle-All-new-10th-Gen.jpg",
"description": "Управление читалкой кнопка-джойстик и боковые клавиши перелистывания. Сенсорный экран с подсветкой 6\".Память 4 Gb | Wi-Fi | Форматы книг: Kindle (AZW), TXT, PDF, unprotected MOBI, PRC natively, HTML, DOC, DOCX (требуется конвертация).",
"code": 83340,
"price": 2778
}, {
"name": "Onyx BOOX Cleopatra 3",
"imageUrl": "books/onyx-cleopatra.jpg",
"description": "АКЦИЯ!!! ОБЛОЖКА в ПОДАРОК! ONYX BOOX Cleopatra 3 — устройство для чтения электронных книг с экраном с увеличенной диагональю и сверхвысоким разрешением. Новейший экран E Ink Carta с диагональю 6,8 дюйма, подсветка MOON Light+ и поддержка функции SNOW Field - все это вы найдете в устройстве с 1 ГБ оперативной и 8 ГБ встроенной памяти. Есть модуль Wi-Fi и браузер для сёрфинга в сети Интернет. Электронная книга базируется на операционной системе Android 4.0.",
"code": 83737,
"price": 7535
}, {
"name": "PocketBook 632 Touch HD 3 Copper",
"imageUrl": "books/pocketbook-touch-hd-3.png",
"description": "АКЦИЯ!!! Скидка 50% на обложку! PocketBook 632 Touch HD3 обладает инфракрасным мультисенсорным экраном, светодиодной подсветкой, встроенным Wi-Fi модулем, 16 ГБ встроенной памяти, производительным процессором с тактовой частотой 1ГГц и 512 МБ оперативной памяти. Инфракрасный экран E Ink Carta с HD разрешением (1448х1072) и 300DPI, гарантирует высокую контрастность, четкость изображения и баланс между белым и черным цветами электронной страницы.",
"code": 96224,
"price": 5099
}
]
// вызываешь когда нужно перерисовывать
render();
function render(){
let container = document.getElementById('cont');
container.innerHTML = '';
arr.forEach(f => {
renderTemplate(container, f);
})
}
function renderTemplate(container, item) {
container.innerHTML += `
<p>название:${item.name}</p>
<a href='http://site.com.ua/?id=${item.code}'>Подробнее</a>
`
}
<div id="cont"></div>