Почему выводится только один элемент?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/yLLEZOO

При клике должно добавиться 2 элемента, но почему-то добавляется только один

Answer 1

[Rustam Azizov]

Потому что вот:

$('.notice').each(function(index, value) {
       if (index > 0) {
          $(this).remove();
       }
...

При каждом нажатии на кнопку идёт проверка количества объектов с классом .notice и удаление тех, которые имеют index больше 0. Более поздние объекты просто удаляются.

Comments

[Genri_Rus]

А как сделать, чтобы выводилось 2 элемента ?

[Rustam Azizov]

Удалите вот это:

if (index > 0) {
      $(this).remove();
}

[Genri_Rus]

Rustam Azizov, а если мне нужно, чтобы на странице был только один класс notice ?

И вот так добавляется сразу 2 элемента, но тогда таймер по клику не обновляется: https://codepen.io/Genri_Rus/pen/bGGvrdJ

[Rustam Azizov]

Могу посоветовать прибавлять к соответствующим элементам атрибуты name и обновлять их по ним. Или любой другой атрибут — не важно, главное чтоб можно было идентифицировать.

[Rustam Azizov]

Genri_Rus, типа того:

$('body').append('<div class="notice" name="' + name + '"></div>');

[Genri_Rus]

Rustam Azizov, спасибо

А может как-то можно обновлять таймер через settimeout или какой-нибудь флаг менять ?

Мне главное таймер обновлять по клику, т.е. такой вариант вполне устроит: https://codepen.io/Genri_Rus/pen/bGGvrdJ

Но не знаю, как обновить таймер по клику ?

[Rustam Azizov]

Genri_Rus, у вас там достаточно всё запутанно — не надо ещё settimeout добавлять, результат вас не обрадует. Я б посоветовал удалить вот это: .each(function(index, value) — это вообще не айс. Лучше при нажатии на кнопку проверяйте items[name] на соответствующий name и добавляйте новый элемент только если его нет. А если есть — по какому-нибудь идентификатору обновляйте анимацию как вот тут:
https://stackoverflow.com/questions/5069841/how-to...

[Genri_Rus]

Rustam Azizov, вот пример: vintagetechnics.ru

Там при добавлении товара и последующих кликах появляются такие нотисы, я смотрел во вкладке source файл scripts, у них на сайте апендится -notification-box без всяких идентификаторов, как вообще такое возможно ?

Они точно также создают объект notifications и добавляют его в массив с помощью unshift

[Rustam Azizov]

Genri_Rus, лучше конечно добавлять в массив, чем через jquery искать объекты. Если можете — сделайте так. Лучше побольше логики из HTML вынести. Так код со временем не превратится в лапшу.

[Rustam Azizov]

Genri_Rus, не пожалейте пометить как ответ, коль помогло понять в чём проблема.

[Genri_Rus]

Rustam Azizov, так я сделал аналог или нет ?

const items = {};

Или нужно ?

const items = [];

[Genri_Rus]

Rustam Azizov, а могли бы показать полный пример как нужно ?

[Rustam Azizov]

Genri_Rus, это на ваш вкус.

[Genri_Rus]

Rustam Azizov,

Лучше при нажатии на кнопку проверяйте items[name] на соответствующий name и добавляйте новый элемент только если его нет.

Типа так ?

if (!$(".notice__info").length) {
     $('.notice').append(out);
}

[Genri_Rus]

Rustam Azizov, мне если честно не совсем понятно

if (items[name] == name) {
  то тогда только апендить ?
}

[Rustam Azizov]

Genri_Rus, https://codepen.io/Reenuay/pen/NWWzJmY вот, не самое лучшее решение, зато немногословное, простое и рабочее. А вообще, советую вам перейти на Vue. JQuery — это кошмар.

[Genri_Rus]

Rustam Azizov, огромное Вам спасибо !

Да я планирую на vue, вот немного разберусь с webpack для начала

[Rustam Azizov]

Genri_Rus, пожалуйста. Вы можете и без вэбпака им пользоваться, как альтернативой для JQuery.

[Genri_Rus]

Rustam Azizov, хотел спросить, а если у меня с сервера приходят данные ?

<div class="-notification -f-medium error" style="opacity: 1; top: 0px;">
				<div class="-notification-close site-icons-close"></div>
				<div class="-icon-font- -f-large -notification-icon inline-block"></div>
				<div class="inline-block -notification-text">Товара "<?php echo $product_data->get_name(); ?>" нет в наличии в количестве 2 шт.</div>
				<div class="-notification-timer"></div>
			</div>

Т.е. я использую ajax так:

var Item = function(data) {
     this.data = data;
}
	var items = {};

$('button').on('click', function() {
$.ajax({
	type: 'POST',
	url: m_notice_click.ajax_url,
	data: dataMnot,
	dataType: 'json',
	success: function(data) {
		$('body').append('<div class="-notification-box"></div>');
				
		$('.-notification-box').each(function(index, value) {
			if (index > 0) {
				$(this).remove();
				if (items[data]) return;
							
				var item = new Item(data);
				items[data] = item;	
				$('.-notification-box').append(data);
			}
						
				var notTime = $('.-notification');
						
				if ($('.-notification-timer').width()) {
					$('.-notification-timer').stop(true, true).animate({width: 0}, {duration: 5000, complete: function() { $('.-notification-timer').css("width", "100%"); $(this).parent().remove(); delete items[data]; }});
						}
					});
			}
		});
});

[Rustam Azizov]

Genri_Rus, посмотрите мой кодпен и сделайте по нему. Разницы будет немного. Вместо нажатия на кнопку будет ответ от сервера. Всё остальное практически то же самое.

[Rustam Azizov]

Genri_Rus, то есть просто нужно код из события нажатия кнопки переместить в коллбэк обрабатывающий ответ от сервера.

[Genri_Rus]

Rustam Azizov, а нельзя типа как у них сделать ?

vintagetechnics.ru

У них все апендится в один <div class="-notification-box"></div>

[Rustam Azizov]

Genri_Rus, можно, конечно. Что мешает заменить аппенд в body страницы на аппенд в этот div?

[Genri_Rus]

Rustam Azizov, ну у них: vintagetechnics.ru нету ни одного идентификатора

Как они без идентификаторов обновляют таймеры при кликах ?

[Genri_Rus]

Rustam Azizov, а вот как-то так нельзя ?

https://codepen.io/Genri_Rus/pen/JjjBGXY

По таймеру обновлять ?

[Rustam Azizov]

Genri_Rus, что-то у меня не открывается ваш кодпен. 404.

Как они без идентификаторов обновляют таймеры при кликах ?

Наверное хранят ссылки на объекты как это сделал я.

if (items[name]) {
    items[name].replaceWith($notice);
  }
  else {
    $('body').append($notice);
  }

Загляните в кодпен, который я вам скинул выше.