1

入力を使用して、jquery で div の 1 つのフォント サイズを変更しようとしています。理想的には、入力ボックス内に入力された数字は既存のフォント サイズに追加されますが、これまでのところ私の試みは成功していません。

ここに私がこれまでに持っているものがありますが、機能していないようです:

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 に答える