Вёрстка сайта JavaScript, JQuery
Я только начинаю учиться верстке, и мне дали задание сверстать интернет-магазин. Я сделала карточки товаров, и теперь, когда нажимаешь на кнопку на одной из них (а их много), должно открываться её описание, характеристики и так далее на другой странице.
Описание я сделала в отдельном html-файле, но не хочу создавать множество таких файлов с одной и той же базой. Можно ли с помощью js, jq сделать так, чтобы нажатие на разные кнопки на одной странице перебрасывало на другую, но меняло её наполнение в соответствии с карточкой товара?
Jquery уже нигде не используется давно. Но если нужен jq
Антиспам система не даёт мне запостить ссылку на jq, вначале каждого файла добавь
<!-- Подключи jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
Страница с карточками (index.html)
<!-- Пример карточек -->
<div class="product-card">
<h2>Товар 1</h2>
<button class="product-btn" data-id="product1">Подробнее</button>
</div>
<div class="product-card">
<h2>Товар 2</h2>
<button class="product-btn" data-id="product2">Подробнее</button>
</div>
<script>
$('.product-btn').on('click', function() {
const id = $(this).data('id');
window.location.href = 'product.html?id=' + encodeURIComponent(id);
});
</script>
Страница product.html с jQuery
<h1 id="product-name"></h1>
<p id="product-description"></p>
<p id="product-specs"></p>
<script>
const products = {
product1: {
name: 'Товар 1',
description: 'Описание товара 1',
specs: 'Характеристики товара 1',
},
product2: {
name: 'Товар 2',
description: 'Описание товара 2',
specs: 'Характеристики товара 2',
},
};
$(document).ready(function() {
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get('id');
const product = products[productId];
if (product) {
$('#product-name').text(product.name);
$('#product-description').text(product.description);
$('#product-specs').text(product.specs);
} else {
$('body').html('<p>Товар не найден</p>');
}
});
</script>
Для этого придумали React. Рекомендую
Это по-хорошему не на вёрстке делается, а на серверных языках