Как добавить товар в корзины на яваскрипте?

119
09 февраля 2019, 05:30

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.

Спасибо.

Answer 1

Если я правильно понял

Просто повешай класс к li

Например

<li class="add">Second item</li>
$('.add').click(function () {
  $('#shopping-basket-place').append($(this).text());
});

Если в дальнейшем тебе нужно будет удалить товар из корзины, то лучше сначала помещай весь товар в массив, а потом выводи в блок

READ ALSO
Конвертация html в javascript

Конвертация html в javascript

можете объяснить,как можно вот этот код (структура и стили) представить в виде js файла? по сути нужно конвертировать html файл в js объекты которые...

131
Подсказки для ячеек в таблице HTML [закрыт]

Подсказки для ячеек в таблице HTML [закрыт]

Есть сайтик ссылка нужно сделать подсказку (картинка) ячеек примерно как на этом сайте

105
Конфликт слайдера

Конфликт слайдера

Написал простенький слайдер и обнаружил ошибкуЕсли слайдер один на странице - то всё ок

139
Получение XML на asp.net

Получение XML на asp.net

Подскажите лучший способ получение xml отправленного POST запросом на aspnet? С помощью контрола или парсить post запрос? Наиболее красивый и интересный...

125