1

Estou numa peleja aqui para tentar fazer com que uma função seja interrompida quando determinada condição for alcançada e reabilitá-la, caso determinado botão seja clicado.

No meu caso, tenho uma texto e botões que alteram o tamanho da fonte (além dos botões também estou usando cookies e atalhos no teclado, mas isso é outra história). Minha dificuldade está sendo em bloquear o botão de aumentar a fonte, caso essa esteja com 25px; e bloquear o de diminuir, caso a fonte esteja com 13px. É possível?

Detalhe: eu já utilizei os métodos show e hide para esses botões e até que funciona, entretanto eu não conseguia deixar esses valores ocultos em um cookie. Também usei o prevent.default, mas sem êxito.

Além do código inserido abaixo, também tenho o mesmo no Codepen.

$(".dec-font").click($.diminuiFonte = function() {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) - 3.0;
  $("#body-post").animate({
    'font-size': size + 'px'
  });
  console.log(size);
  return (false);
});

$(".inc-font").click($.aumentaFonte = function() {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) + 3.0;
  $("#body-post").animate({
    'font-size': size + 'px'
  });
  console.log(size);
  return (false);
});

$(".res-font").click($.resetaFonte = function() {
  var size = '16';
  size = size.replace('px', '');
  size = parseInt(size);
  $("#body-post").animate({
    'font-size': size + 'px'
  });
  console.log(size);
  return (false);
});
.acess li {
  display: inline-block;
  margin-right: -4px!important;
  border: 1px solid #bbb;
  cursor: pointer
}

.acess li a {
  font-size: 10px;
  padding: 6px;
  display: block;
  font-family: Open Sans;
  text-transform: uppercase
}

#body-post {
  font-size: 16px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='acess'>
  <ul>
    <li class='dec-font'><a>A-</a></li>
    <li class='res-font'><a>Tamanho Normal</a></li>
    <li class='inc-font'><a>A+</a></li>
  </ul>
</div>

<div id='body-post'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra nulla quis velit pretium, in lacinia enim rutrum. Proin molestie magna in ullamcorper pulvinar. Sed ac finibus metus. Quisque placerat posuere elit. Cras tempus faucibus est, at
  aliquam nisi pulvinar non. Vestibulum nunc lacus, mattis ac molestie quis, facilisis a elit. Cras auctor maximus urna eget ultricies. Nunc rhoncus imperdiet dui, in fringilla purus fringilla venenatis. Cras commodo, odio ut accumsan eleifend, nulla
  dolor vestibulum lacus, elementum posuere eros dolor non dui. Nulla sed ligula eleifend, blandit mi eget, iaculis nisl. In ut augue sed arcu tincidunt auctor ac quis lectus. Fusce ac purus turpis. Duis ultrices purus non massa ultricies, id sagittis
  sapien tempor. Nam erat libero, accumsan et commodo et, vulputate nec metus. Duis pretium tortor sed condimentum facilisis. Aliquam non elit ac lectus luctus rhoncus vitae a arcu. Vestibulum vulputate rutrum maximus. Donec arcu quam, ultricies finibus
  arcu nec, dapibus semper neque. Etiam bibendum sem non tristique cursus. Duis sed porta quam. Nam faucibus placerat mattis. Sed interdum sapien ex, non elementum augue scelerisque non. Quisque porta mi at eros suscipit varius. Proin et efficitur ante,
  ac faucibus diam. Cras vehicula sagittis metus, in suscipit lacus dapibus posuere. Morbi odio felis, dapibus in urna vitae, pretium sodales dui. Cras ornare risus et dolor feugiat pellentesque. Donec volutpat, eros non feugiat tempus, ex leo vulputate
  velit, a aliquet felis nunc sed turpis. Pellentesque et velit vel massa sodales tincidunt. Proin suscipit mauris arcu, sed euismod sapien pharetra in. Nam eget hendrerit ex.
</div>

2 Respostas 2

3

Se você não deseja que a função seja executada por completo, basta verificar o valor da variável size conforme suas regras de tamanho máximo e mínimo:

$(".dec-font").click($.diminuiFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) - 3.0;

  if (size >= 13) {
    $("#body-post").animate({'font-size' : size + 'px'});
  }
});

$(".inc-font").click($.aumentaFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) + 3.0;

  if (size <= 25) {
    $("#body-post").animate({'font-size' : size + 'px'});
  }
});

Perceba que agora a animação no tamanho das letras está condicional e nem sempre será executada.

Com isso, seu código completo ficaria mais ou menos da seguinte forma:

$(".dec-font").click($.diminuiFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) - 3.0;

  if (size >= 13) {
    $("#body-post").animate({'font-size' : size + 'px'});
  }
});

$(".inc-font").click($.aumentaFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) + 3.0;

  if (size <= 25) {
    $("#body-post").animate({'font-size' : size + 'px'});
  }
});

$(".res-font").click($.resetaFonte = function () {
  var size = '16'; size = size.replace('px', '');
  size = parseInt(size);
  $("#body-post").animate({'font-size' : size + 'px'});
});
.acess li {
  display:inline-block;
  margin-right:-4px!important;
  border:1px solid #bbb; cursor:pointer
}

.acess li a {
  font-size:10px; padding:6px;
  display:block; font-family:Open Sans;
  text-transform:uppercase
}

#body-post {
  font-size:16px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='acess'>
  <ul>
    <li class='dec-font'><a>A-</a></li>
    <li class='res-font'><a>Tamanho Normal</a></li>
    <li class='inc-font'><a>A+</a></li>
  </ul>
</div>

<div id='body-post'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra nulla quis velit pretium, in lacinia enim rutrum. Proin molestie magna in ullamcorper pulvinar. Sed ac finibus metus. Quisque placerat posuere elit. Cras tempus faucibus est, at aliquam nisi pulvinar non. Vestibulum nunc lacus, mattis ac molestie quis, facilisis a elit. Cras auctor maximus urna eget ultricies. Nunc rhoncus imperdiet dui, in fringilla purus fringilla venenatis. Cras commodo, odio ut accumsan eleifend, nulla dolor vestibulum lacus, elementum posuere eros dolor non dui. Nulla sed ligula eleifend, blandit mi eget, iaculis nisl. In ut augue sed arcu tincidunt auctor ac quis lectus. Fusce ac purus turpis. Duis ultrices purus non massa ultricies, id sagittis sapien tempor. Nam erat libero, accumsan et commodo et, vulputate nec metus. Duis pretium tortor sed condimentum facilisis.

Aliquam non elit ac lectus luctus rhoncus vitae a arcu. Vestibulum vulputate rutrum maximus. Donec arcu quam, ultricies finibus arcu nec, dapibus semper neque. Etiam bibendum sem non tristique cursus. Duis sed porta quam. Nam faucibus placerat mattis. Sed interdum sapien ex, non elementum augue scelerisque non. Quisque porta mi at eros suscipit varius. Proin et efficitur ante, ac faucibus diam. Cras vehicula sagittis metus, in suscipit lacus dapibus posuere. Morbi odio felis, dapibus in urna vitae, pretium sodales dui. Cras ornare risus et dolor feugiat pellentesque. Donec volutpat, eros non feugiat tempus, ex leo vulputate velit, a aliquet felis nunc sed turpis. Pellentesque et velit vel massa sodales tincidunt. Proin suscipit mauris arcu, sed euismod sapien pharetra in. Nam eget hendrerit ex.
</div>


Uma outra opção, é criar uma classe css que desative a sua li, por exemplo:

.disabled {
  pointer-events: none;
  opacity:0.4;
}

Assim, sempre que uma das opções for clicada, você verifica o tamanho e adiciona ou remove essa classe utilizando addClass ou removeClass do JQuery:

Para desativar, seria assim:

$(".dec-font").removeClass("disabled");

Para ativar, seria dessa forma:

$(".dec-font").addClass("disabled");

O código completo, ficaria mais ou menos da seguinte forma:

$(".dec-font").click($.diminuiFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) - 3.0;
  $("#body-post").animate({'font-size' : size + 'px'});
  bloqueiaBotoes(size);
});

$(".inc-font").click($.aumentaFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) + 3.0;
  $("#body-post").animate({'font-size' : size + 'px'});
  bloqueiaBotoes(size);
});

$(".res-font").click($.resetaFonte = function () {
  var size = '16'; size = size.replace('px', ''); size = parseInt(size); $("#body-post").animate({'font-size' : size + 'px'});
  allEnabled();
});

function bloqueiaBotoes(size) {
  if (size <= 13) {
    $(".dec-font").addClass("disabled");
    $(".inc-font").removeClass("disabled");
  } else if (size >= 25) {
    $(".inc-font").addClass("disabled");
    $(".dec-font").removeClass("disabled");
  } else {
    allEnabled();
  }
}

function allEnabled() {
  $(".dec-font").removeClass("disabled");
  $(".inc-font").removeClass("disabled");
}
.acess li {
  display:inline-block;
  margin-right:-4px!important;
  border:1px solid #bbb; cursor:pointer
}

.acess li a {
  font-size:10px; padding:6px;
  display:block; font-family:Open Sans;
  text-transform:uppercase
}

#body-post {
  font-size:16px
}

.disabled {
  pointer-events: none;
  opacity:0.4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='acess'>
  <ul>
    <li class='dec-font'><a>A-</a></li>
    <li class='res-font'><a>Tamanho Normal</a></li>
    <li class='inc-font'><a>A+</a></li>
  </ul>
</div>

<div id='body-post'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra nulla quis velit pretium, in lacinia enim rutrum. Proin molestie magna in ullamcorper pulvinar. Sed ac finibus metus. Quisque placerat posuere elit. Cras tempus faucibus est, at aliquam nisi pulvinar non. Vestibulum nunc lacus, mattis ac molestie quis, facilisis a elit. Cras auctor maximus urna eget ultricies. Nunc rhoncus imperdiet dui, in fringilla purus fringilla venenatis. Cras commodo, odio ut accumsan eleifend, nulla dolor vestibulum lacus, elementum posuere eros dolor non dui. Nulla sed ligula eleifend, blandit mi eget, iaculis nisl. In ut augue sed arcu tincidunt auctor ac quis lectus. Fusce ac purus turpis. Duis ultrices purus non massa ultricies, id sagittis sapien tempor. Nam erat libero, accumsan et commodo et, vulputate nec metus. Duis pretium tortor sed condimentum facilisis.

Aliquam non elit ac lectus luctus rhoncus vitae a arcu. Vestibulum vulputate rutrum maximus. Donec arcu quam, ultricies finibus arcu nec, dapibus semper neque. Etiam bibendum sem non tristique cursus. Duis sed porta quam. Nam faucibus placerat mattis. Sed interdum sapien ex, non elementum augue scelerisque non. Quisque porta mi at eros suscipit varius. Proin et efficitur ante, ac faucibus diam. Cras vehicula sagittis metus, in suscipit lacus dapibus posuere. Morbi odio felis, dapibus in urna vitae, pretium sodales dui. Cras ornare risus et dolor feugiat pellentesque. Donec volutpat, eros non feugiat tempus, ex leo vulputate velit, a aliquet felis nunc sed turpis. Pellentesque et velit vel massa sodales tincidunt. Proin suscipit mauris arcu, sed euismod sapien pharetra in. Nam eget hendrerit ex.
</div>

1
  • 1
    Funcionou perfeitamente, Daniel! Acabei optando pela segunda dica, até pela sugestão visual de que o botão está desabilitado. Veio muito bem a calhar! Muito obrigado, meu caro!
    – winiercape
    8/05/2020 às 2:46
1

Mantendo a mesma estrutura que você está usando basta fazer assim:

$(".inc-font").click($.aumentaFonte = function () {

  var size = $("#body-post").css('font-size').replace('px',''); 

   //aqui você verifica se o tamanho é menor que os 25, faz o incremento caso 
   //seja não há a necessidade de colocar um else, pois se o valor for maior 
   //não irá incrementar

   if(size < 25){
    size = parseInt(size) + 3.0;

    //então basta colocar na div
      $("#body-post").animate({'font-size' : size + 'px'});
   } 
  return (false);
 });

para a função que diminui a fonte basta usar a mesma lógica.

1
  • Oi, Eliton! Grato pelo retorno, cara. Acabei ficando com a resposta do Daniel, mas muito obrigado pela sugestão!
    – winiercape
    8/05/2020 às 2:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .