1

我正在尝试使用输入重新调整 jquery 中我的一个 div 的字体大小。理想情况下，输入框中的数字将添加到现有字体大小上，但到目前为止我的尝试没有成功。

这是我到目前为止所拥有的，但它似乎不起作用：

HTML

<div class="resizeable" style="font-size: 30px;">test</div>
<input type="text" name="size" class="size" />

jQuery

$(document).ready(function() {
    $('.size').keyup(function() {
        var currentFontSize = $('this').css('font-size');
        var input = $(this).val(); // grab the input value
        var newsize = input + currentFontSize;
        console.log(size);

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.resizeable').css('font-size', newsize);  
        } 
    }); 
});

JSFiddle http://jsfiddle.net/eqE2R/36/

任何帮助，将不胜感激。

4

2 回答 2

2

您需要添加px价值并parseInt()用于添加：

$('.size').keyup(function() {
    var currentFontSize = $('.resizeable').css('font-size');
    var input = $(this).val(); // grab the input value
       alert(currentFontSize)
    var newsize =parseInt(input,10) + parseInt(currentFontSize,10);
    console.log(newsize);

    if ($(this).val().length > 0)
    {
        // replace css value on live preview 
        $('.resizeable').css('font-size', newsize + 'px');  
    } 
  });

演示

于 2013-10-29T10:41:51.447 回答
1

小提琴

你忘了增加px价值。您还必须将值解析为 int

$(document).ready(function() {
    var currentFontSize = $('.resizeable').css('font-size');
    $('.size').keyup(function() {
        var input = $(this).val(); // grab the input value
        var newsize = parseInt(input) + parseInt(currentFontSize);

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.resizeable').css('font-size', newsize + 'px');  
        } 
    }); 
});

编辑：我将currentFontSize变量定义移到keyup函数之外，因此它只会在开始时声明一次。

于 2013-10-29T10:34:52.133 回答