1
Wenn ich mehrmal "A +" als möglich klicke und dann auf "A-" klicke, wird die Schriftgröße größer, anstatt beim ersten Klick zu sinken. Wie kann ich dieses Ereignis beim Klicken auf eine andere Schaltfläche stoppen?Ich kann das Klickereignis nicht anhalten, wenn ich auf eine andere Schaltfläche klicke
$(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>