javascript - 字体大小调整器

Question

我有一个字体大小调整器，需要包含在一个链接中。例如。单击时显示文本链接“Larger Type”并切换到“Smaller Type”的文本链接。我不知道为什么它会切换类“加/减”但它不会切换文本或在 else 语句之后调用字体调整大小函数？

目前，它第一次单击以调整文本大小并添加减号类，但之后它什么也不做。

http://jsfiddle.net/infatti/P6SVv/

var targetContainers = $('.two-thirds');
var newLargerSize = 16;
var newSmallerSize = 14;
$('.resize-font a').click(function(){

if ($(this).hasClass('plus')) {

    $(targetContainers).css('font-size', newLargerSize);

    $(this).text('Smaller Type').toggleClass('minus');

} else {

    $(targetContainers).css('font-size', newSmallerSize);

    $(this).text('Larger Type').toggleClass('plus');

};

});

Answer 1

问题在于 toggleClass()

请看看这会解决你的问题 http://jsfiddle.net/3w2nG/

Answer 2

您的条件未通过您的切换校准。

您检查是否a有 class plus，但如果有，则永远不会删除加号，而是删除（或添加）减号。

您应该始终切换 plus，以在它存在时将其删除，并在它不存在时添加它：

$('.resize-font a').click(function() {
   var hasPlus = $(this).hasClass('plus');
   $(targetContainers).css('font-size', hasPlus ? newLargerSize : newSmallerSize);

   $(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus');
});

如果您需要减号进行样式设置，则应始终切换两者：

$(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus minus');