1
当我点击“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) {
\t return false;
}else {
\t $(".main-content").css("font-size", fontSize + "px");
\t fontSize = fontSize - 1;
\t 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" \t title="Fonte normal">A</a>
<a href="javascript:void(0);" id="contrast-b" \t title="Contraste preto/branco">A</a>
<a href="javascript:void(0);" id="contrast-w" \t 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>