изменение размера шрифта с помощью jquery

Question

У меня есть страница, где мне нужно изменить размер шрифта.

Упрощенная настройка это одна:

HTML:

<div class="box">Some dummy text in here</div> 
<a href="#" class=".decreaseFont">decrease</a> 

<a href="#" class=".increaseFont">increase</a> 

JS:

$(document).ready(function() { 

    $(".increaseFont").click(function() { 
     $(".box").css("font-size", "12px"); 
    }); 

    $(".decreaseFont").click(function() { 
     $(".box").css("font-size", "11px"); 
    }); 

}); 

CSS:

.box { 
    font-size:11px; 
    padding:30px; 
    border:1px solid red; 
} 

По какой-то причине я не мог определить, что это не работает. Here is a fiddle тоже.

Спасибо за ваше время.

Answer 1

Проверить вы Classname

class=".increaseFont" 

Либо удалите . из него

<a href="#" class="decreaseFont">decrease</a> 
<a href="#" class="increaseFont">increase</a> 

Может быть выбран с помощью

$(".decreaseFont") 
$(".increaseFont") 

Или избежать его в селекторе

<a href="#" class=".decreaseFont">decrease</a> 
<a href="#" class=".increaseFont">increase</a> 

Может быть выбран с помощью

$(".\\.decreaseFont") 
$(".\\.increaseFont") 

Check Fiddle

Answer 2

В вашем классе не должно быть точек .. Он должен быть

<a href="#" class="decreaseFont">decrease</a> 
<a href="#" class="increaseFont">increase</a> 

Answer 3

Это потому, что вы применяете имена классов неправильно:

<a href="#" class=".decreaseFont">decrease</a> 

<a href="#" class=".increaseFont">increase</a> 

просто удалить точек, как в fiddle