Мы используем следующий код JS, чтобы проверить localStorage и сохранить его.
require(["jquery"], function (e) {
const t = function () {
const t = e("#togglebtw").is(":checked");
e(".price-container .price-including-tax").toggle(!t), e(".price-container .price-excluding-tax").toggle(t), localStorage.setItem("togglebtw", t ? "true" : "false");
};
e(function () {
e("#togglebtw")
.on("click", t)
.prop("checked", "true" === localStorage.getItem("togglebtw")),
t();
});
});
Как мы можем также добавить/удалить класс в тело, когда отмечен #togglebtw?
Совет: используйте разумные имена переменных. Похоже, ваш код был минимизирован.
@freedomn-m Спасибо! Да, действительно, это то, что мы имеем в виду. Каким должен быть правильный итоговый код в этом случае?
@freedomn-m Я имею в виду и то, и другое. Класс должен быть добавлен в тело, когда отмеченный загружается из-за localStorage, а также когда пользователь щелкает. Но в противном случае это должно быть удалено
@freedomn-m Можете ли вы помочь мне с правильным полным кодом для этого?
Правильно ли ваш существующий код, который запускается при щелчке, сохраняется в локальном хранилище? Похоже, так и должно быть.
@freedomn-m Мой текущий код работает идеально. Но единственное дополнение, которое мы хотели бы добавить/удалить, — это класс body.
Вы можете переключать класс к телу в любое время с помощью этого кода, например, используя btwChecked
в качестве класса.
e("body").toggleClass("btwChecked", "true" === localStorage.getItem("togglebtw"))
или, используя флажок:
e("body").toggleClass("btwChecked", e("#togglebtw").is(":checked"))
(где e
обычно будет $
для jquery)
так как у вас уже есть t = e("#togglebtw").is(":checked")
, это становится e("body").toggleClass("btwchecked", t)
после этого t =
.
Здесь используется перегрузка toggleClass(className, state)
, которая позволяет передать логическое значение, чтобы определить, следует ли добавить или удалить класс.
Чтобы добавить это к существующему коду: аналогичным образом, в мини-формате:
require(["jquery"], function (e) {
const t = function () {
const t = e("#togglebtw").is(":checked");
e(".price-container .price-including-tax").toggle(!t),
e(".price-container .price-excluding-tax").toggle(t),
localStorage.setItem("togglebtw", t ? "true" : "false"),
e("body").toggleClass("btwChecked", t);
};
e(function () {
e("#togglebtw")
.on("click", t)
.prop("checked", "true" === localStorage.getItem("togglebtw")),
t();
});
});
Нет необходимости изменять функцию doc.ready, поскольку она вызывает t()
Спасибо! I работает почти идеально, но не удаляет класс при нажатии #togglebtw. На localStorage работает отлично. Как мы можем это решить?
Хороший улов - я обновлю.
Вы имеете в виду «когда вы устанавливаете флажок при загрузке» или «когда пользователь нажимает на флажок»? Если при загрузке, то используя ваш существующий код:
e("body").addClass("true" === localStorage.getItem("togglebtw") ? "btwchecked" : "")
?