I have 2 buttons for now as an example. The problem here is, when I click on Button A for example it changes the class on the html document with the value from "data-accent-switcher" which in this case is BLUE, but when I press on button A again it changes with the value from button B, same happens with button b. Now even If I press like 20 times on Button A, I always want to have that value of from the data attribute (data-accent-switcher).
How can I make it possible?
<button class='ipsButton accentSwitcher' data-accent-switcher="blue">Button A</button>
<button class='ipsButton accentSwitcher' data-accent-switcher="yellow">Button B</button>
<script type="text/javascript">
$(document).ready(function() {
$('.accentSwitcher').on("click", function() {
var accentValue = $(this).data('accent-switcher');
if (document['documentElement']['classList']['contains']('accent-blue')) {
document['documentElement']['classList']['remove']('accent-blue');
document['documentElement']['classList']['add']('accent-yellow');
} else {
if (document['documentElement']['classList']['contains']('accent-yellow')) {
document['documentElement']['classList']['remove']('accent-yellow');
document['documentElement']['classList']['add']('accent-blue');
}
}
ips['utils']['cookie']['set']('ipsTheme_type', accentValue, true)
});
});
</script>
I’ve tried with if statements but obviously I’m wrong and doesn’t work.
3
Answers
So thanks to @DavidThomas I used his code and came up with this
I hope this is right. But I'm not sure about this
$(this).closest(document.documentElement)
Thanks, for your question, i think you can do it, like this.
I hope my solution, will help you.
I’d suggest the following approach, with explanatory comments in the code:
JS Fiddle demo.
As OP wishes to continue using jQuery, I’ve added jQuery option below, again this has explanatory comments in the code:
JS Fiddle demo.
References:
[attribute]
selectors.box-shadow
.display
.hsl()
.justify-content
.linear-gradient()
.place-content
.repeating-linear-gradient()
.data-*
attributes.Array.from()
.Array.prototype.map()
.document.querySelectorAll()
.Element.classList
.Element.closest()
.Event
.EventTarget.addEventListener()
.HTMLElement.dataset
.NodeList.prototype.forEach()
.addClass()
.css()
.closest()
.data()
.get()
.map()
.on()
.removeClass()
.