jqueryを使用してフォントサイズを動的に更新するにはどうすればよいですか？

Question

フォントサイズを動的に更新したいので、このコードを作成しましたが、問題は機能していません。

var font_size = 36; 
$('#content').on('click', function(){ 

    $('#editor').css('display', 'block'); 

    var numbersValue = "<input type=\"number\" id=\"input-fz\" value="+font_size+">"; 


var currentValue = $(numbersValue).prop('value'); 
    var eleId = $(numbersValue).prop('id'); 
    $(eleId).change(function(event) { 
     /* Act on the event */ 
     newValue = $(this).val(); 
     newvalueFonts = newValue; 
     $('h1').css('font-size', newvalueFonts); 
    }); 

$('#result').html(numbersValue) 

}) 

Here is my fiddle

Answer 1

おそらく3つの変更は、IDセレクタの使用#

1. を要します。
2. bodyからinput要素にイベントを委譲します。
3. は

var font_size = 36; 
 
$('#content').on('click', function() { 
 

 
    $('#editor').css('display', 'block'); 
 

 
    var numbersValue = "<input type=\"number\" id=\"input-fz\" value=" + font_size + ">"; 
 

 
    var currentValue = $(numbersValue).prop('value'); 
 

 
    var eleId = $(numbersValue).prop('id'); 
 
    // Implementing point 1,2 
 
    $('body').on('change', '#' + eleId, function(event) { 
 

 
    /* Act on the event */ 
 
    newValue = $(this).val(); 
 
    newvalueFonts = newValue; 
 
    // implementing point 3 
 
    $('h1').css('font-size', newvalueFonts + 'px'); 
 
    }); 
 

 
    $('#result').html(numbersValue) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="content"> 
 
    Some Content Here 
 
</h1> 
 

 
<div id="editor" style="display:none"> 
 
    <div id="result"></div> 
 
</div>

Answer 2

あなたのIDセレクタは間違っている、あなたは#

$(eleId)が欠落していることに注意してください。また$('#'+eleId)

する必要があり、あなたはfont-size

ためのユニットとして+'px'を渡すべきですあなたがアクセスしている頃にはIDセレクタを使用して要素は、要素はあなたの選択が間違っているjQuery

var font_size = 36; 
 
$('#content').on('click', function() { 
 
    $('#editor').css('display', 'block'); 
 
    var numbersValue = "<input type=\"number\" id=\"input-fz\" value=" + font_size + ">"; 
 
    var currentValue = $(numbersValue).prop('value'); 
 
    var eleId = $(numbersValue).prop('id'); 
 
    $('#result').html(numbersValue); 
 
    $('#' + eleId).change(function(event) { 
 
    var newValue = $(this).val(); 
 
    $('h1').css('font-size', newValue + 'px'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1 id="content"> 
 
    Some Contetn Here 
 
</h1> 
 

 
<div id="editor" style="display:none"> 
 
    <div id="result"></div> 
 
</div>

Answer 3

を使用して要素にアクセスする前にhtml()メソッドを使用し、DOMに存在しません。 $(eleId)の代わりに$('#' + eleId)にする必要があります。 $('h1').css('font-size', newvalueFonts + 'px')のようにfont-sizeの後にpxを追加する必要があります。あなたのスクリプトの更新。

var font_size = 36; 
 
$('#content').on('click', function(){ 
 

 
$('#editor').css('display', 'block'); 
 
var numbersValue = "<input type=\"number\" id=\"input-fz\" value="+font_size+">"; 
 

 
$('#result').html(numbersValue); 
 

 
var currentValue = $(numbersValue).prop('value'); 
 
var eleId = $(numbersValue).prop('id'); 
 

 
$('#' + eleId).change(function(event) { // Modified here 
 
     /* Act on the event */ 
 
     newValue = $(this).val(); 
 

 
     newvalueFonts = newValue; 
 
     $('h1').css('font-size', newvalueFonts + 'px'); // Modified here 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="content"> 
 
    Some Contetn Here 
 
</h1> 
 

 
<div id="editor" style="display:none"> 
 
    <div id="result"></div> 
 
</div>

Answer 4

&、可能な場合は、あなたがテンプレート要素を切り替えることができ、フォントサイズの単位としてpxのようにユニットを追加します。

<h1 id="content"> 
    Some Content Here 
</h1> 

<div id="editor" style="display:none"> 
    <input type="number" id="input-fz"> 
</div> 

<script> 
var font_size = 36; 
$('#content').on('click', function(){ 

    $('#editor').css('display', 'block'); 
    $('#input-fz').val(font_size); 

    $('#input-fz').change(function(event) { 
     /* Act on the event */ 
     newValue = $(this).val().toString()+'px'; 
     $('h1').css('font-size', newValue); 
    }); 

}); 
</script> 

Answer 5

あなたはセレクターを言及していない、あなたはフォントサイズは `$（eleId）ピクセル