Есть корзина с товароми, и если она пустая нужно добавить в ней сообщение с этой инормацией, как это сделать?

Question

[Дмитрий]

Класс none = display: none;
Товаров всего три, нужно написать код который проверяет эти три товара на наличие класса none, если он есть у всех тогда выводиться сообщение о пустой корзине.(Код может быть и в jquery, спасибо заранее)

Answer 1

[Вадим]

JS:

// так как Вы упомянули jQuery, то будем пользоваться старыми методами создания массива из html коллекции и var

var items = Array.prototype.slice.call(document.querySelectorAll('.cart__box-desktop-item')) 
var emptyMessageElement = document.querySelector('.cart__box-desktop-message')

// определяем что у всех есть класс none
var isAllHidden = items.every(function(item){return item.classList.contains('none')}) 

if(isAllHidden) {
  emptyMessageElement.classList.remove('none')
} else {
  emptyMessageElement.classList.add('none')
}

Comments

[Дмитрий]

Я в Js не углублялся и понятие не имею почему не работает, но всё равно спасибо!

[Вадим]

Dmitrie T, всмысле вы попробовали предложенное решение и не сработало?

[Дмитрий]

Вадим, Да.

[Вадим]

Dmitrie T, ну, если покажите как и где применили, а лучше воссоздадите в песочнице, например jsfiddle, то можем дальше посмотреть что да как

[Дмитрий]

Вадим, https://jsfiddle.net/bon271tf/40/

[Вадим]

Dmitrie T, Так Вы сами подумайте. Вы проверяете опустела ли корзина. В Вашем коде это проверяется один раз, а изменения же происходят при каждом клике на крестик. Соответственно, и проверять нужно после каждого удаления товара.

var items = Array.prototype.slice.call(document.querySelectorAll('.cart__box-desktop-item')) 
var emptyMessageElement = document.querySelector('.cart__box-desktop-message')

$('.cart__box-desktop-btn').click(function(){
    $(this).parent().addClass('none');
    
    // определяем что у всех есть класс none
		var isAllHidden = items.every(function(item){return item.classList.contains('none')}) 

		if(isAllHidden) {
  		emptyMessageElement.classList.remove('none')
		} else {
  		emptyMessageElement.classList.add('none')
		}
});


// Оставим это и тут тоже, на случай, если Вам нужно проверять корзину при загрузке страницы.
// Тогда стоит обернуть это кусочек в функцию и вызывать её.
// Если не нужно - можете удалить кусочек ниже.

// определяем что у всех есть класс none
var isAllHidden = items.every(function(item){return item.classList.contains('none')}) 

if(isAllHidden) {
  emptyMessageElement.classList.remove('none')
} else {
  emptyMessageElement.classList.add('none')
}

[Дмитрий]

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