Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
1 / 1 / 2
Регистрация: 13.03.2012
Сообщений: 382

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

04.11.2019, 16:17. Показов 2253. Ответов 11
Метки нет (Все метки)

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

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
                }
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
04.11.2019, 16:17
Ответы с готовыми решениями:

Выполнение скрипта после нажатия на кнопку и перезагрузки страницы
Здравствуйте! Нажимаю на кнопку, страница перезагружается но скрипт не выполняется $('#go_post').click(function() { ...

После перезагрузки сбрасывается разрешение
Здравствуйте, в общем-то вся проблема описана в названии вопроса: после перезагрузки или выключения и последующего включения,...

После перезагрузки сбрасывается время
После перезагрузки винды выскакивает какоето окошко в cmd.exe и сбрасывается время. В этом окошке: C:\Documents and Settings\Max\reg...

11
 Аватар для fanatikus
1932 / 1523 / 703
Регистрация: 17.11.2012
Сообщений: 6,585
05.11.2019, 20:33
проверка на true
изменили текcт
добавляем в хранилище false
перезагрузка страницы
проверяем хранилище
а там false
и опять текст меняется
0
1 / 1 / 2
Регистрация: 13.03.2012
Сообщений: 382
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;
                }
но когда перезагружаю страницу, опять сбрасывается цвет кнопки
0
 Аватар для fanatikus
1932 / 1523 / 703
Регистрация: 17.11.2012
Сообщений: 6,585
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;
}
0
1 / 1 / 2
Регистрация: 13.03.2012
Сообщений: 382
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
        }
    });
при нажатии на кнопку, стиль кнопки и текст меняется, а после обновления страницы сбрасывается на стандартные стили...
0
 Аватар для fanatikus
1932 / 1523 / 703
Регистрация: 17.11.2012
Сообщений: 6,585
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 ?
0
1 / 1 / 2
Регистрация: 13.03.2012
Сообщений: 382
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>
0
 Аватар для fanatikus
1932 / 1523 / 703
Регистрация: 17.11.2012
Сообщений: 6,585
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
                }
0
1 / 1 / 2
Регистрация: 13.03.2012
Сообщений: 382
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] - когда ещё раз нажимаю возвращается в исходное состояние
0
 Аватар для fanatikus
1932 / 1523 / 703
Регистрация: 17.11.2012
Сообщений: 6,585
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;
                }
0
1 / 1 / 2
Регистрация: 13.03.2012
Сообщений: 382
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;
        },
как правильно сделать, чтоб кнопки не меняли цвет, а были выбраны?
0
1 / 1 / 2
Регистрация: 13.03.2012
Сообщений: 382
07.11.2019, 00:41  [ТС]
как правильно сделать, чтоб кнопки не меняли цвет после обновления страницы, а были выбраны?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
07.11.2019, 00:41
Помогаю со студенческими работами здесь

После перезагрузки ПК сбрасывается разрешение экрана
Купил новый vga кабель - теперь после включения сбрасывается разрешение, в устройствах монитор отображен как не PnP. Нагуглил, что возможно...

Сбрасывается сетевой принтер после перезагрузки
Всем привет. Проблема такая: Есть ноут с установленной Windows 8.1 домашняя х64, и ПК на Win XP Professional x32, который находится в...

Сбрасывается план электропитания, после перезагрузки Windows 10
После перезагрузки план электропитания Максимальная производительность сбрасывается на Высокая производительность, как это исправить? И в...

Сбрасывается уровень громкости после каждой перезагрузки Windows 10
Всем доброго дня! Подскажите, пожалуйста, в чем может быть причина? После каждой перезагрузки ПК уровень громкости самостоятельно...

Проблема с дублированием экранов (после перезагрузки дублирование сбрасывается на расширенные)
Всем доброго дня! Помогите разобраться в вопросе. Работаю в школе. Сейчас поменял ноутбуки учителям и к проекторам подключаю HDMI...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
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 . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru