1

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.

Спасибо.

1
  • Пожалуйста, отредактируйте заголовок на более информативный. 10 окт 2018 в 17:29

1 ответ 1

3

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

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

Например

<li class="add">Second item</li>

$('.add').click(function () {
  $('#shopping-basket-place').append($(this).text());
});

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

0

Ваш ответ

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

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