Сбрасывается цвет и текст кнопки после перезагрузки страницы

@wolf777 · Регистрация: 13.03.2012

Студворк — интернет-сервис помощи студентам

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

JavaScript
1
2
3
4
5
6
7
8
9
if (productsArr[sbId] !== undefined || localStorage.getItem('themeStyle') === 'true') {
                    $('span[data-sb-id-or-vendor-code="'+sbId+'"]').html('Добавить в корзину');//Меняем текст
                    $(this).removeClass('button-active'); // удалить цвет
                    localStorage.setItem('themeStyle', 'false'); // записываем значение в localStorage
                } else {
                    $('span[data-sb-id-or-vendor-code="'+sbId+'"]').html('Удалить из корзины');//Меняем текст
                    $(this).addClass('button-active'); // добавляем цвет
                    localStorage.setItem('themeStyle', 'true'); // записываем значение в localStorage
                }

@fanatikus · 05.11.2019, 20:33

проверка на true
изменили текcт
добавляем в хранилище false
перезагрузка страницы
проверяем хранилище
а там false
и опять текст меняется

@wolf777 · 05.11.2019, 23:11 **[ТС]**

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

проверка на true
изменили текcт
добавляем в хранилище false
перезагрузка страницы
проверяем хранилище
а там false
и опять текст меняется

пробовал так

JavaScript
1
2
3
4
5
6
7
      if (localStorage['cookie-message'] == true) {
                    $(this).removeClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Добавить в корзину');
                    localStorage['cookie-message'] = false;
                } else {
                   $(this).addClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Удалить в корзину');
                    localStorage['cookie-message'] = true;
                }

но когда перезагружаю страницу, опять сбрасывается цвет кнопки

@fanatikus · 06.11.2019, 21:26

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

но когда перезагружаю страницу, опять сбрасывается цвет кнопки

вы поняли что я написал?
когда проходит проверка на true, в хранилище тоже нужно кидать true
аналогично для false

JavaScript
1
2
3
4
5
6
7
if (localStorage['cookie-message'] == true) {
    $(this).removeClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Добавить в корзину');
    localStorage['cookie-message'] = true;
} else {
    $(this).addClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Удалить в корзину');
    localStorage['cookie-message'] = false;
}

@wolf777 · 06.11.2019, 23:26 **[ТС]**

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

вы поняли что я написал?

я как только уже не пробовал, все равно при обновлении страницы сбрасывается...

я уже в index.html пробовал добавлять

JavaScript
1
2
3
4
5
6
7
8
9
$('button.product__add-to-cart-button').click(function() {
        let bt = $(this), id = bt.data('sb-id-or-vendor-code');
 
        if (localStorage['cookie-message'] == true) {
                $(this).removeClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Добавить в корзину'); // true
        } else {
            $(this).addClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Удалить из корзины'); //false
        }
    });

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

@fanatikus · 06.11.2019, 23:36

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

if (productsArr[sbId] !== undefined || localStorage.getItem('themeStyle') === 'true') {
$('span[data-sb-id-or-vendor-code="'+sbId+'"]').html('Добавить в корзину');//Меняем текст
$(this).removeClass('button-active'); // удалить цвет
localStorage.setItem('themeStyle', 'false'); // записываем значение в localStorage
} else {
$('span[data-sb-id-or-vendor-code="'+sbId+'"]').html('Удалить из корзины');//Меняем текст
$(this).addClass('button-active'); // добавляем цвет
localStorage.setItem('themeStyle', 'true'); // записываем значение в localStorage
}

а откуда у вас тут this ?

@wolf777 · 06.11.2019, 23:55 **[ТС]**

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

а откуда у вас тут this ?

он и был, вот структура html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="product__element">
            <img class="product__img" src="smartbasket/img/iphone-7.png" alt="Iphone 7">
            <div class="product__name">Iphone 7</div>
            <div class="product__price">35000.55 Р</div>
 
 
            <div class="product__quantity">
 
            </div>
            <button class="product__add-to-cart-button" data-sb-id-or-vendor-code="003" data-sb-product-name="Iphone 7" data-sb-product-price="35000.55" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/iphone-7.png">
                <i class="fas fa-cart-plus"></i><span></span>
            </button>
        </div>
        <div class="product__element">
            <img class="product__img" src="smartbasket/img/iphone-8.png" alt="Iphone 8">
            <div class="product__name">Iphone 8</div>
            <div class="product__price">50000.45 Р</div>
 
            <div class="product__quantity">
 
            </div>
            <button class="product__add-to-cart-button" data-sb-id-or-vendor-code="004" data-sb-product-name="Iphone 8" data-sb-product-price="50000.45" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/iphone-8.png">
                <i class="fas fa-cart-plus"></i><span></span>
            </button>
        </div>

@fanatikus · 07.11.2019, 00:01

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

он и был

вы понимаете что такое this ?
вот тут есть this(кнопка по которой кликнули)

JavaScript
1
2
3
4
5
6
7
8
9
$('button.product__add-to-cart-button').click(function() {
        let bt = $(this), id = bt.data('sb-id-or-vendor-code');
 
        if (localStorage['cookie-message'] == true) {
                $(this).removeClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Добавить в корзину'); // true
        } else {
            $(this).addClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Удалить из корзины'); //false
        }
    });

а тут откуда this ?

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

if (productsArr[sbId] !== undefined || localStorage.getItem('themeStyle') === 'true') {
$('span[data-sb-id-or-vendor-code="'+sbId+'"]').html('Добавить в корзину');//Меняем текст
$(this).removeClass('button-active'); // удалить цвет
localStorage.setItem('themeStyle', 'false'); // записываем значение в localStorage
} else {
$('span[data-sb-id-or-vendor-code="'+sbId+'"]').html('Удалить из корзины');//Меняем текст
$(this).addClass('button-active'); // добавляем цвет
localStorage.setItem('themeStyle', 'true'); // записываем значение в localStorage
}

@wolf777 · 07.11.2019, 00:13 **[ТС]**

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

вы понимаете что такое this ?

ссылка на объект

Добавлено через 6 минут
в данном случае он ссылается на button.product__add-to-cart-button.button-active (кнопка при нажатии)

[button.product__add-to-cart-button.button-active] - при нажатии выделяется другим цветом
[button.product__add-to-cart-button] - когда ещё раз нажимаю возвращается в исходное состояние

@fanatikus · 07.11.2019, 00:23

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

ссылка на класс

нет это ссылка на объект перед точкой
в вашем случае на кнопку
$('button.product__add-to-cart-button').click(function() {
а в этом случае

JavaScript
1
2
3
4
5
6
7
if (localStorage['cookie-message'] == true) {
                    $(this).removeClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Добавить в корзину');
                    localStorage['cookie-message'] = false;
                } else {
                   $(this).addClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Удалить в корзину');
                    localStorage['cookie-message'] = true;
                }

а строгом режиме this будет ссылаться на глобальный объект window, а в строгом будет undefined

Добавлено через 6 минут
так это часть какой-то функции?

JavaScript
1
2
3
4
5
6
7
if (localStorage['cookie-message'] == true) {
                    $(this).removeClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Добавить в корзину');
                    localStorage['cookie-message'] = false;
                } else {
                   $(this).addClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Удалить в корзину');
                    localStorage['cookie-message'] = true;
                }

@wolf777 · 07.11.2019, 00:31 **[ТС]**

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

так это часть какой-то функции?

да суть такая, у меня есть выбор товара, там имеются по id товары, я сделал чтоб они у меня добавлялись и удалялись с одной кнопки, при добавлении кнопка меняется на удалить товар, но когда перезагружаю страницу, то кнопка меняет цвет на исходный и возвращается добавить товар (заместо удалить товар), получается все кнопки которые я отмечаю после перезагрузки становятся в исходное положение

так выглядет то перезагрузки

Сбрасывается цвет и текст кнопки после перезагрузки страницы

по поводу функции у меня расположена это так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
    //кнопка добавить товар в корзину
            addToBasketButton.click(function () {
            let productsArr = methods.getProducts() || {}; // получаем данные корзины или создаём новый объект, если данных еще нет
        let sbId =  $(this).data("sb-id-or-vendor-code"); // ID товара
 
                if (productsArr[sbId] !== undefined) {
                $(this).removeClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Добавить в корзину'); //true
                } else {
                    $(this).addClass('button-active').find('span[data-sb-id-or-vendor-code]').text('Удалить из корзины'); // false
                }
 
                    if (productsArr[sbId] !== undefined) {
                    // let beforeClickHtml = $(this).html();
                    // $(this).text('Товар уже в корзине');
                    // $('body').append(methods.alertBlock('alreadyAdded'));
                    // setTimeout(() => {
                    // $(this).html(beforeClickHtml);
                    // }, 1500);
                    // return false;
                        localStorage['cookie-message'] = false;
                        delete productsArr[sbId]; //Удаляем из массива
                    methods.setProducts(productsArr); //Обновляем хранилище
                    smartBasket.empty(); // проверка пустой переменной
                    smartBasket.append(methods.showProducts(productsArr));
                    methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin');
                    methods.commonResult(productsArr, 'updateCommonResult');
                } else {
                    let productProperties = {};
                    productProperties.sbId = sbId; // id товара
                    productProperties.sbImg = $(this).data("sbProductImg"); // картинку
                    productProperties.sbName = $(this).data("sbProductName"); // наименования товара
                    if (defaults.productSize && defaults.productPrice) {
                        productProperties.sbSize = $(this).attr("data-sb-product-size");
                    }
                    if (defaults.productQuantityWrapper) {
                        productProperties.sbQuantity = $(this).parents('.' + defaults.productElement).find('.' + inputProductQuantity.attr('class')).val();
                    } else {
                        productProperties.sbQuantity = +$(this).data("sbProductQuantity");
                    }
                    productProperties.sbPrice = +$(this).attr("data-sb-product-price");
                    productProperties.sbPrice.toFixed(2);
                    if (defaults.productQuantityWrapper) {
                    productProperties.sbPriceCommon = +$(this).attr("data-sb-product-price") * $(this).parents('.' + defaults.productElement).find('.' + inputProductQuantity.attr('class')).val();
                    productProperties.sbPriceCommon.toFixed(2)
                    } else {
                    productProperties.sbPriceCommon = +$(this).attr("data-sb-product-price") * +$(this).data("sbProductQuantity");
                        productProperties.sbPriceCommon.toFixed(2)
                    } else {
                        // иначе товар добавлен в корзину
                    //console.log(`getQuantity = ${getQuantity}`);
                    productsArr[sbId] = productProperties;
                        localStorage['cookie-message'] = true;
                        if(productsArr !== null){
                    methods.setProducts(productsArr); //записываем в localStore
                    smartBasket.empty(); // проверка пустой переменной
                    smartBasket.append(methods.showProducts(productsArr));
                    methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin');
                    methods.commonResult(productsArr, 'updateCommonResult');
                        } else {
                            console.log('тут ничего нет');
                        }
                    //  $('body').append(methods.alertBlock('inBasket'));
                    // $(this).removeAttr('data-sb-product-size').removeAttr('data-sb-product-size');
                    // $(this).removeData('sbProductPrice').removeData('sbProductPrice');
                }
                }
            });
            return smartBasket;
        },

как правильно сделать, чтоб кнопки не меняли цвет, а были выбраны?

@wolf777 · 07.11.2019, 00:41 **[ТС]**

как правильно сделать, чтоб кнопки не меняли цвет после обновления страницы, а были выбраны?

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@fanatikus 1932 / 1523 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	05.11.2019, 20:33
	проверка на true изменили текcт добавляем в хранилище false перезагрузка страницы проверяем хранилище а там false и опять текст меняется 0

@wolf777 1 / 1 / 2 Регистрация: 13.03.2012 Сообщений: 382
	07.11.2019, 00:41 [ТС]
	как правильно сделать, чтоб кнопки не меняли цвет после обновления страницы, а были выбраны? 0