JSBin

Question

我正在尝试编写一些脚本，允许用户点击一个对象，每次点击它都会使字体大小增加1px。

在我尝试添加while循环以添加大小限制之前，它工作正常。

var fs = $(".word").css('fontSize');
$(".word").click(function() {
  while (fs <= "25px") {
    $(this).css('fontSize', (parseInt(fs) + 1) + 'px');
  }
});

Answer 1

JSBin

您的代码无效的原因与条件有关。比较字符串的值时。与'44px' < '12px'或'44px' < '123px'一样，它始终为 false 。
加倍关注 the question.

while (fs <= "25px")

更改为：

while (parseInt(fs) < 25)

一切都好！

Answer 2

您正在将整数与字符串进行比较，因此类似于12＆lt; =＆＃34; 25px＆＃34;。你应该做的是比较2个整数。
你在这里不需要一个while循环。每次点击只需增加一次字体大小，因此一次检查+增加就足够了。
您应该将fs的增加值存储回fs或使用点击功能中的fs = parseInt($(".word").css('fontSize'))获取更新的字体大小。

所以一种可能的解决方案是：

var fs = parseInt($(".word").css('fontSize'));
$(".word").click(function(){
    if (fs <= 25){
        fs++;
        $(this).css('fontSize', toString(fs) + 'px');
    }
});

Answer 3

您正在使用字符串比较而不是数字。

var fs = +$('.word').css('fontSize'); //gets actual number
while(fs <= 25) { //compares numbers
    $(this).css('fontSize', fs + 'px'); //the '+' coerces to string
    fs++; //increment the iterator
}

Word大小随javascript中的大小限制而增加

3 个答案:

JSBin