【问题标题】:Font Resizer if else字体大小调整器
【发布时间】:2012-08-07 22:03:58
【问题描述】:

我有一个需要包含在一个链接中的字体调整器。例如。单击时显示文本链接“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');

};

});

【问题讨论】:

  • 尝试将$(targetContainers)改为targetContainers

标签: javascript jquery


【解决方案1】:

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

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

【讨论】:

  • 即使我执行 Else If 并检查是否有减号,它也会出现同样的错误。目前,它第一次单击以调整文本大小并添加减号类,但之后它什么也不做。
  • @infatti:是的,因为您检查a 是否有plus,但如果有,您永远不会删除加号。因此,下次您检查时,它仍将具有plus,并且始终设置为newLargerSize
  • @infatti:此外,Giberno 的评论是正确的,targetContainers 已经是一个 jQuery 对象,不需要包含在 $() 中,尽管这不是你的问题的原因。
【解决方案2】:

toggleClass() 有问题

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-11-11
    • 2012-09-18
    • 1970-01-01
    • 1970-01-01
    • 2013-06-04
    • 1970-01-01
    • 2011-04-05
    • 1970-01-01
    相关资源
    最近更新 更多