Estou criando uma barra de acessibilidade e nela tem as opções de aumentar e diminuir a fonte. Segue o código dos botões:
<button type="button" id="btnAumentar">A+</button>
<button type="button" id="btnDiminuir">A/</button>
E o codigo do jquery.
var $btnAumentar = $("#btnAumentar");
var $btnDiminuir = $("#btnDiminuir");
var $elemento = $("body .content-center").find("*"); //encontra todos os elementos dentro do #content
var fonts = [];
function obterTamanhoFonte() {
for (var i = 0; i < $elemento.length; i++) {
fonts.push(parseFloat($elemento.eq(i).css('font-size')));
}
}
obterTamanhoFonte();
$btnAumentar.on('click', function() {
for (var i = 0; i < $elemento.length; i++) {
++fonts[i];
$elemento.eq(i).css('font-size', fonts[i]);
}
});
$btnDiminuir.on('click', function() {
for (var i = 0; i < $elemento.length; i++) {
--fonts[i];
$elemento.eq(i).css('font-size', fonts[i]);
}
});
Porém o usuário pode aumentar o quanto quiser as fontes, e ou diminuir. Eu gostaria de limitar estes cliquem em 3, mas que fossem relativos um ao outro, com um total de 6 tamanhos de fontes, se estiver no máx de tamanho pode apertar para diminuir 6x por exemplo e vice-versa. Alguem consegue me dar uma ajuda? =)