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>