Форум

Alessio18911 · #1 (**permalink**) 16.06.2018, 01:04

Добрый вечер! Прошу помощи. Задача: есть корзина с карточками и заголовком, в котором указано количество карточек в корзине на данный момент. Нужно сделать так, чтобы при клике на кнопке в каждой карточке она удалялась из корзины, при этом в заголовке изменялось и цифра. На данный момент получилось реализовать только так: карточки удаляются, однако цифра не меняется, хотя если физически убирать карточки из разметки, то всё работает корректно. Подскажите, пожалуйста, в чём проблема.

<!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);
  }  
  
});

j0hnik · #2 (**permalink**) 16.06.2018, 01:11

получать заново нужно, это не "живая коллекция"

function calcAmount() {
    amount.text($(container).find('.block').length);
    console.log($(container).find('.block').length);
  }

j0hnik · #3 (**permalink**) 16.06.2018, 01:19

живые коллекции хранят такие методы как
getElementsByTagName
getElementsByClassName

Alessio18911 · #4 (**permalink**) 16.06.2018, 01:21

Спасибо огромное за оперативный и детальный ответ!

У меня уже возникло ощущение, что он "неживой", но вот как обойти это - не знал. Ещё раз благодарю!

Alessio18911 · #5 (**permalink**) 16.06.2018, 01:22

Сообщение от j0hnik

живые коллекции хранят такие методы как
getElementsByTagName
getElementsByClassName

А можно ли совмещать - часть элементов в JQ находить с помощью $, а часть - "живыми" методами? И ещё, почему считается, что "неживые" методы удобнее и практичнее в работе, нежели "живые"?

j0hnik · #6 (**permalink**) 16.06.2018, 01:23

function calcAmount() {
var len = $(container).find('.block').length
    amount.text(len);
    console.log(len);
  }

только лучше так напишите, или простой счетчик создайте

j0hnik · #7 (**permalink**) 16.06.2018, 01:28

есть свои преимущества и там и там.
совмещать можно, только нужно понимать, что методы Jquery не переменяются к коллекциям полученным родными методами, надо ее сначала сделать объектом Jquery

Alessio18911 · #8 (**permalink**) 16.06.2018, 01:31

Ага, всё понятно. И последний вопрос - покритикуйте, пожалуйста, правильность (рациональность) кода, который удаляет карточки при клике на кнопку. Честно говоря, только сегодня столкнулся с JQ по работе, и, фактически, всё сделал методом тыка. Да и JS ещё не силён у меня )

j0hnik · #9 (**permalink**) 16.06.2018, 01:45

$(function(){
var amount = $('.amount');
  //calcAmount();    
  $('.container .block a').on('click', function(e){
    e.preventDefault();   
    deleteBlock(this);
    calcAmount();
  });
  
  function deleteBlock(th){
    $(th).parents('.block').remove();
  }  
  
  function calcAmount() {
  	var len = $('.container .block').length;
    amount.text(len);
    console.log(len );
  }   
});

я б так сделал, но в целом нормально, селектор сохраняйте в переменную только если собираетесь использовать больше одного раза.

Форум

Справочник

Discord чат

Курсы javascript