var shopping = document.getElementById('shopping-basket-place');
var ourList = document.getElementById("our-list");
var ourButton = document.getElementById('our-button');
var ourHeadline = document.getElementById('our-headline');
var listItems = document.querySelectorAll('li');
for (var i = listItems.length - 1; i >= 0; i--) {
listItems[i].addEventListener('click', function() {
// alert('Click detected!');
ourHeadline.innerHTML = this.innerHTML;
});
}
ourButton.addEventListener('click', function() {
// create New List
shopping.innerHTML += this.innerHTML + "Something New" + " , ";
});
body {
font-family: sans-serif;
}
.buttonAdd {
background-color: #7290bf;
padding: 20px;
font-size: 20px;
transform: skewX(-20deg);
border: 0;
box-shadow: 5px 10px 3px;
}
ul {
list-style: none;
}
.nav-li {
margin-top: 30px;
}
.nav-li li {
padding: 0 20px;
margin: 15px 0 15px 10px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 35px;
font-weight: bold;
}
.thumbnail {
height: 50px;
width: 50px;
margin-left: 350px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/basscss/8.0.10/css/basscss.min.css">
<h1 id="our-headline">Кликните на товаре чтобы добавить его в корзину</h1>
<!--Click a list item to replace this text. -->
<button class="buttonAdd" id="our-button">Add new item</button>
<div class="nav-li">
<ul id="our-list">
<li>Бейсболка <span class="thumbnail overflow-hidden"><img src="https://media.decathlon.in/3598688-home_default/trek-100-mountain-trekking-cap-blue.jpg" alt=""></span></li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>
<img src="https://banner2.kisspng.com/20180329/uwq/kisspng-computer-icons-contract-of-sale-trade-shopping-car-cart-5abd43eb33e7d9.5315293915223531312126.jpg" alt="" style="width:50px; height: 50px;" class="relative"><span style="margin-left: 35px; font-size:25px;position:relative;">Корзина</span>
<div style="max-width: 100%; height: 200px; background-color: #fcfcfc; border: 1px solid #e2e2e2; margin: 20px">>
<p id="shopping-basket-place"></p>
</div>
</div>
Ребята, помогите с сайтом, а именно с JS
. Когда я нажимаю на список (Бейсболка, thing 1, thing 2,.. etc.)
Надо чтобы товар появлялся в блоке корзина, тоже самое что если нажать на верхнюю кнопку Add new item
.
Спасибо.
Если я правильно понял
Просто повешай класс к li
Например
<li class="add">Second item</li>
$('.add').click(function () {
$('#shopping-basket-place').append($(this).text());
});
Если в дальнейшем тебе нужно будет удалить товар из корзины, то лучше сначала помещай весь товар в массив, а потом выводи в блок
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
можете объяснить,как можно вот этот код (структура и стили) представить в виде js файла? по сути нужно конвертировать html файл в js объекты которые...
Есть сайтик ссылка нужно сделать подсказку (картинка) ячеек примерно как на этом сайте
Написал простенький слайдер и обнаружил ошибкуЕсли слайдер один на странице - то всё ок
Подскажите лучший способ получение xml отправленного POST запросом на aspnet? С помощью контрола или парсить post запрос? Наиболее красивый и интересный...