Question

当我点击“A +”的次数超过可能更改的次数然后我点击“A-”时，字体大小会增加而不是在第一次点击时减少。如何在点击另一个按钮时停止此事件？

$(document).ready(function(){
  var fontSize = 16;
  /* Increase Text */
  $("#increase-text").click(function(){
    if(fontSize >= 24) {
      return false;
   }else {
    $(".main-content").css("font-size", fontSize + "px");
     fontSize = fontSize + 1;
     console.log('+ ' + fontSize);
    }

  });

  /* Decrease Text */
  $("#decrease-text").click(function(){

    if(fontSize <= 10) {
	  return false;
    }else {

	  $(".main-content").css("font-size", fontSize + "px");
	  fontSize = fontSize - 1;
	  console.log('+ ' + fontSize);
   }
  });
  /* Default */
  $("#normal-text").click(function(){
    var fontSize = 16;
    $(".main-content").css("font-size", fontSize + "px");
    $('body').removeClass("contrast-white");
    $('body').removeClass("contrast-black");
  });
  /* Contrast Black */
  $("#contrast-b").click(function(){
    $('body').addClass("contrast-black");
    $('body').removeClass("contrast-white");
  });

  /* Contrast White */
  $("#contrast-w").click(function(){
     $('body').addClass("contrast-white");
     $('body').removeClass("contrast-black");
  });
});

.controllSize a {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out
}
.controllSize {
    text-align: right
}
.controllSize .boxCtrl {
    display: inline-block
}
.controllSize a {
    width: 32px;
    height: 32px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: #f4f4f4;
    border: 2px solid #fff;
    color: rgba(0, 0, 0, 0.9);
    text-decoration: none;
    font-size: 14px
}
.controllSize a:hover {
    background-color: #c8c8c8;
    border-color: #000
}
.controllSize a#contrast-b {
    background-color: #000;
    color: #fff;
    font-weight: bold;
}
.controllSize a#contrast-w {
    background-color: #f4f4f4;
    color: #000;
    font-weight: bold;
}

/* Constrast White */
html body.contrast-white {
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: none;
}

/* Constrast Black */
html body.contrast-black {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none;
}

<div class="controllSize">
 <div class="boxCtrl" style="font-size: 23.5px;"> 
  <a href="javascript:void(0);" id="decrease-text" title="Diminuir fonte">A-</a> 
  <a href="javascript:void(0);" id="increase-text" title="Aumentar fonte">A+</a> 
  <a href="javascript:void(0);" id="normal-text" 	 title="Fonte normal">A</a> 
  <a href="javascript:void(0);" id="contrast-b" 	 title="Contraste preto/branco">A</a> 
  <a href="javascript:void(0);" id="contrast-w" 	 title="Contraste branco/preto" >A</a>
 </div>
 <div class="main-content">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan porta nisl id ullamcorper. Pellentesque lobortis, neque ac suscipit feugiat, justo eros egestas magna, ut euismod dolor orci vel turpis. Maecenas in odio non justo consequat luctus quis quis elit. Integer ultrices lorem sit amet libero luctus, ac aliquam augue scelerisque. Sed ultrices aliquet metus id aliquam. Duis elementum turpis ut eros rutrum, vel venenatis leo venenatis. Phasellus condimentum viverra massa, quis dignissim sem accumsan dictum. Nullam vulputate dolor eget sollicitudin tincidunt.</p>
 </div>
</div>

Answer 1

您应该更改操作的顺序 - 首先更改字体大小，然后更改css -

fontSize = fontSize + 1;
$(".main-content").css("font-size", fontSize + "px");

也在减少文字功能中。

我还会将正常文本更改为不重新声明fontSize变量

fontSize = 16;

点击另一个按钮

1 个答案: