Font Resizer if else

Question

我有一个字体大小调整器，需要包含在一个链接中。例如。显示文本链接“较大类型”并在单击时切换到“较小类型”的文本链接。我不确定为什么它会切换类“加/减”但它不会在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

您的状况未通过切换校准。

您检查a是否有类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');

Answer 2

问题在于toggleClass（）

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