Почему начинает считать избронное начиная с двух, а не по порядку?

Question

[Павел Сидоров]

Вот страница. на ней стразу товары со сердечками.
НЕ могу понять где ошибка , счетчик избранного начинает считать сразу с 2, хотя товар добавляется 1. При добавлении второго товара то считает нормально. В целом функционал нормально работает, за исключением этого счетчика сверху.

вот код

п.с. все товары в куках вижу как надо, тупит ток счетчик

вот код

$(document).ready(function(){

//delete all favourites

    $(document).on('click','.favor-delete-btn span',function() { 
        var name = 'FOREVER';
        var cookie_zac = "";
        $.cookie(name, cookie_zac,{path:'/'});
        location.reload();
    });

//delete one item

    $(document).on('click','.favour-del',function() { 
        var name = 'FOREVER';

        if(BX.getCookie(name))
        {
            var id_p = $(this).attr('data-id');
            var cookie_zac = BX.getCookie(name);
            var cookie_ar = cookie_zac.split('|');
            var index = BX.util.array_search(id_p,cookie_ar);
            if(index || index === 0)
            {

                cookie_ar = BX.util.deleteFromArray(
                    cookie_ar,
                    index
                );
                console.log(cookie_ar);
            }

            BX.setCookie(name, cookie_ar.join('|'), {expires: 86400,path:'/'});
        }
        location.reload();
    });
});

// работа с закладками

$(document).ready(function () {

    $(document).on('click', '.to_favorites', function() { 
        var name = 'FOREVER';
        var cookie_zac = BX.getCookie(name);

        if($(this).hasClass('active')){
            $(this).removeClass('active');
            var znach = $(this).attr('data-cookieid')+"|";
            var new_zac = cookie_zac.replace(znach,"");

            $('.goods_icon-counter').html(
                +($('.goods_icon-counter').html())-1
            );
            if($(this).data('remove')) {
                $(this).closest('.favour-item').remove();
            }
            BX.setCookie(name, new_zac, {expires: 86400,path:'/'});
        }else{
            $(this).addClass('active');

            if(cookie_zac == undefined){
                var znach = "|"+$(this).attr('data-cookieid')+"|";
                BX.setCookie(name, znach, {expires: 86400,path:'/'});
            }else{
                var znach = cookie_zac+$(this).attr('data-cookieid')+"|";
                BX.setCookie(name, znach, {expires: 86400,path:'/'});
            }
        }
        activZacladca();
        return false;
    });

    activZacladca();

function activZacladca() { // проверка есть ли товар в закладках
    var name = 'FOREVER';

    var cookie_zac = BX.getCookie(name);
    if (cookie_zac !== undefined) {
        var mas = cookie_zac.split('|');

        mas.forEach(function (item, i, mas) {
            if (item != "" ) {

                $('#favour_in .goods_icon-counter').html(
                    i
                );
                $(".to_favorites[data-cookieid='"+item+"']").addClass('active');
            }
        });

		//
    }
	$('#favour_in .goods_icon-counter').html(mas.length-1);

}

});

Answer 1

[Вадим]

$('#favour_in .goods_icon-counter').html(mas.length - 1); // mas.length == 3.

Вы когда массив создаёте из строки, то делаете:
'|' + id +'|', а потом делаете .split('|')
Вот и получаются лишние элементы, потому что черта и перед id и после.

'|228|'.split('|') --> ['', '228', ''] // length - 3.

Comments

[Павел Сидоров]

Понял, а как выдернуть без лишних ?

'|228|'.split('|') --> ['', '228', ''] // length - 3.

[Вадим]

Павел Сидоров, так может просто создавать без лишних?

[Павел Сидоров]

блин ну типо если убрать, то как split сделать и в массив все убрать

[Павел Сидоров]

я увидел о чем вы говорите, когда распечатал

console.log(mas);

['', '228', '']

но по идеи сплит же должен по разделителю все разделить

[Вадим]

Павел Сидоров, я если честно уже подзабыл как там у Вас всё работает, а заного лезть разбираться уже некогда.
Самый простой вариант для Вас в данный момент, как мне кажется, это после .split('|') сделать

mas = mas.filter(function(item){return item !== ''})

, что отчистит его от пустых элементов. Тогда сможете избавиться в коде от проверки на пустую строку при заполнении счётчика.

А вот эта строка я если честно вообще не понимаю зачем, если заполнение идёт выше внутри if.

$('#favour_in .goods_icon-counter').html(mas.length - 1); // mas.length == 3.

Но если она всё же нужна, то тогда просто оставите .length от которого НЕ будете ничего отнимать.

[Вадим]

Павел Сидоров, Да, верно. Прочтите ответ мой ещё раз. .split делает именно то, что должен.
Вбейте в консоли браузера:
'a|b'.split('|')
и
'|a|b|'.split('|')
И поймёте в чём дело. Второй случай - Ваш.

[Павел Сидоров]

Вадим, Да. Вы совершенно правы.

Блин благодарен! все получилось
консоль лог выводит то, что нужно!