Добрый вечер! Прошу помощи. Задача: есть корзина с карточками и заголовком, в котором указано количество карточек в корзине на данный момент. Нужно сделать так, чтобы при клике на кнопке в каждой карточке она удалялась из корзины, при этом в заголовке изменялось и цифра. На данный момент получилось реализовать только так: карточки удаляются, однако цифра не меняется, хотя если физически убирать карточки из разметки, то всё работает корректно. Подскажите, пожалуйста, в чём проблема.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h4 class="title">Товары (<span class="amount"></span>)</h4>
<div class="block">
<a сlass="btn" href='#'>Нажми сюда</a>
</div>
<div class="block">
<a сlass="btn" href='#'>Нажми сюда</a>
</div>
<div class="block">
<a сlass="btn" href='#'>Нажми сюда</a>
</div>
<div class="block">
<a сlass="btn" href='#'>Нажми сюда</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>
|
Код:
|
/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
padding: 5px 25px;
font-size: 18px;
margin: 0;
color: #444;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 600px;
outline: 3px dashed green;
}
.block {
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 100px;
padding: 10px 20px;
background: pink;
outline: 2px solid red;
}
a {
display: block;
height: 50px;
padding: 0 20px;
color: white;
font-weight: 600;
line-height: 50px;
text-decoration: none;
background: red;
border-radius: 30px;
border: none;
} |
$(document).ready(function(){
var amount = $('.amount');
var container = $('.container');
var allBlocks = $(container.find('.block'));
var buttons = $(allBlocks.find('a'));
//calcAmount();
buttons.on('click', function(e){
e.preventDefault();
deleteBlock($(e.currentTarget));
calcAmount();
});
function deleteBlock($btn) {
$btn.parents().remove('.block');
}
function calcAmount() {
amount.text(allBlocks.length);
console.log(allBlocks.length);
}
});