I am currently developing a new feature for font customization on a website. The drop-down menu offers several font options to choose from. When a user clicks on one of these options, the following code is executed:
jQuery(function($) {
if (localStorage.getItem('font-01')) {
$('#font-css-01').prop('disabled', localStorage.getItem('font-01') == 'true');
}
$('#font-selector-01').on('click', function() {
$('#font-css-01').prop('disabled', function(_, prop) {
localStorage.setItem('font-01', !prop);
return !prop;
});
});
});
This script must be repeated for each font option, but I need to ensure that only one font choice is enabled at a time. Currently, there can be unexpected behavior if a user selects a non-default font and then chooses another non-default font (for example, selecting font-01 and then font-02). I need to figure out a way to reset previous choices before applying a new one.
The .prop() function targets the stylesheet ids for the different fonts, and each drop-down subitem is sequentially labeled from #font-selector-01 to $font-selector-n.